Highcharts - 根据系列数设置颜色方案选项

时间:2017-12-18 15:52:32

标签: javascript highcharts

基本上我想尝试做的是根据有多少系列改变我的高级图表主题的配色方案。这样的事情可以实现吗?我应该将此代码放在主题内或每个图表内吗?

e.g。

var colors = [];
var series = chart.series;

if (series == 2) {
  colors = ['blue', 'red'];
} else if (series == 3) {
  colors = ['blue', 'red', 'black'];
} else if (series == 4) {
  colors = ['blue', 'red', 'black', green];
}

JSFiddle:http://jsfiddle.net/tbo2o4Lm/

1 个答案:

答案 0 :(得分:0)

按照以下操作顺序操作很容易:

  1. 定义系列
  2. 调整颜色数组并应用主题
  3. 创建图表
  4. 示例代码

    var series = [{
      data: [1, 2]
    }, {
      data: [2, 3]
    }, {
      data: [1, 4]
    }];
    
    Highcharts.theme = {
      colors: (function() {
        var colors = ['red', 'blue', 'green', 'orange'];
        return colors.length <= series.length ? colors : colors.slice(0, series.length);
      })()
    }
    
    // Apply the theme
    Highcharts.setOptions(Highcharts.theme);
    
    var chart = Highcharts.chart('container', {
      series: series
    });
    

    现场演示: http://jsfiddle.net/kkulig/m2Lnh270/