admin管理员组

文章数量:1022393

I want to apply two different colors to the labels of the same X-axis on a chart.

I'm using Version 4.2.1 of echarts. The X axis labels ranges from 0 to 1,000 in increments of 100.

I want to make the first six labels (i.e. 0, 100, 200, 300, 400, 500) red; then the rest of the labels (i.e. 600, 700, 800, 900, 1000) blue.

In the official documentation it shows that we can specify ONE color to the X-axis labels through the following code: 

           xAxis: {
                      name: 'Population',
                      axisLabel: {
                          textStyle: {
                              color: 'red'
                          }
                      },
                  }

I tried running a basic if function as below but it does not work. Not sure what variable name I should use in the if brackets. 

             axisLabel: {
                          textStyle: {
                              if (axisLabel < 600) {
                                color: 'red';
                              }
                              else {
                                color: 'blue';
                              }
                          }
                      },

I want to apply two different colors to the labels of the same X-axis on a chart.

I'm using Version 4.2.1 of echarts. The X axis labels ranges from 0 to 1,000 in increments of 100.

I want to make the first six labels (i.e. 0, 100, 200, 300, 400, 500) red; then the rest of the labels (i.e. 600, 700, 800, 900, 1000) blue.

In the official documentation it shows that we can specify ONE color to the X-axis labels through the following code: 

           xAxis: {
                      name: 'Population',
                      axisLabel: {
                          textStyle: {
                              color: 'red'
                          }
                      },
                  }

I tried running a basic if function as below but it does not work. Not sure what variable name I should use in the if brackets. 

             axisLabel: {
                          textStyle: {
                              if (axisLabel < 600) {
                                color: 'red';
                              }
                              else {
                                color: 'blue';
                              }
                          }
                      },
  • javascript
  • data-visualization
  • echarts
Share Improve this question asked May 10, 2019 at 0:14 PestoChanPestoChan 111 silver badge2 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 3

axis.axisLabel.color supports function, which can be set like:

color: function(value, index) {
    if (index < 6) {
        return 'red';
    }
    else {
        return 'blue';
    }
}

I want to apply two different colors to the labels of the same X-axis on a chart.

I'm using Version 4.2.1 of echarts. The X axis labels ranges from 0 to 1,000 in increments of 100.

I want to make the first six labels (i.e. 0, 100, 200, 300, 400, 500) red; then the rest of the labels (i.e. 600, 700, 800, 900, 1000) blue.

In the official documentation it shows that we can specify ONE color to the X-axis labels through the following code: 

           xAxis: {
                      name: 'Population',
                      axisLabel: {
                          textStyle: {
                              color: 'red'
                          }
                      },
                  }

I tried running a basic if function as below but it does not work. Not sure what variable name I should use in the if brackets. 

             axisLabel: {
                          textStyle: {
                              if (axisLabel < 600) {
                                color: 'red';
                              }
                              else {
                                color: 'blue';
                              }
                          }
                      },

I want to apply two different colors to the labels of the same X-axis on a chart.

I'm using Version 4.2.1 of echarts. The X axis labels ranges from 0 to 1,000 in increments of 100.

I want to make the first six labels (i.e. 0, 100, 200, 300, 400, 500) red; then the rest of the labels (i.e. 600, 700, 800, 900, 1000) blue.

In the official documentation it shows that we can specify ONE color to the X-axis labels through the following code: 

           xAxis: {
                      name: 'Population',
                      axisLabel: {
                          textStyle: {
                              color: 'red'
                          }
                      },
                  }

I tried running a basic if function as below but it does not work. Not sure what variable name I should use in the if brackets. 

             axisLabel: {
                          textStyle: {
                              if (axisLabel < 600) {
                                color: 'red';
                              }
                              else {
                                color: 'blue';
                              }
                          }
                      },
  • javascript
  • data-visualization
  • echarts
Share Improve this question asked May 10, 2019 at 0:14 PestoChanPestoChan 111 silver badge2 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 3

axis.axisLabel.color supports function, which can be set like:

color: function(value, index) {
    if (index < 6) {
        return 'red';
    }
    else {
        return 'blue';
    }
}

本文标签： javascriptEChartsApply two different colors to labels on the same axisStack Overflow

版权声明：本文标题：javascript - ECharts - Apply two different colors to labels on the same axis - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745539458a2155114.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。