在使用for循环后,我的所有柱形图都以单色绘制,我需要在高级图中以不同颜色的每个条形图

时间:2017-01-24 12:09:35

标签: javascript highcharts

enter image description here enter image description here

$.getJSON("json/slide6_chart1.json", function(json) {
    var len = json.length;                              
    for(i=0;i<len; i++){                                      
            options.xAxis.categories = json[0]['data'];  
            j = i-1;                         
            options.series[j] = json[i];                    
            chart = new Highcharts.Chart(options);  
        };

2 个答案:

答案 0 :(得分:1)

也许您正在为循环中创建的所有图表使用相同的配置对象。

const colors = Highcharts.getOptions().colors
const option = {
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    type: 'column',
    color: colors[0]
  }]
}
const options = []
for (let i = 0; i < 4; ++i) {
  option.series[0].color = colors[i]
  options[i] = option
    //options[i] = JSON.parse(JSON.stringify(option)) // Clone object
}
for (let i = 0; i < 4; ++i) {
  Highcharts.chart('chart' + i, options[i])
}

实例: https://jsfiddle.net/q7x1Lecg/

答案 1 :(得分:0)

将colorByPoint选项设置为true并定义所需的颜色序列。

options = {
chart: {...},
plotOptions: {
    column: {
        colorByPoint: true
    }
},
colors: [
    '#ff0000',
    '#00ff00',
    '#0000ff'
]}