根據數據更改圖例顏色高圖表

Question

我可以根據數據動態設置列的顏色，但無法弄清楚如何更改圖例中的顏色。注意jsfiddle，最新的酒吧是綠色的，但傳說是藍色的。有沒有辦法改變列的顏色也會改變圖例顏色？

這裏是我使用的列顏色代碼：

的jsfiddle：http://jsfiddle.net/VCjZx/2/

function makeRun() { 
var divId = "container"; 
var current = new Array(99.95,99.96,99.97,99.98); 
var goal = new Array(99.965, 99.965,99.965,99.965); 
var quarters = new Array("Q1", "Q2", "Q3", "Q4"); 
    var width = 495; var SizeOfFont = '14px'; var currentName = 'Quarterly %'; 

    preprocessData = function (data, goal) { 
     var nData = []; 
     var colorGood = '#348017'; var colorBad = '#E42217'; var colorUse; 
     for (var i = 0; i < data.length; i++) { 
      if (data[i] >= goal[i]) { colorUse = colorGood; } 
      else { colorUse = colorBad; } 
      nData.push({ 
       y: data[i], 
       x: i, 
       color: colorUse 
      }); 
     } 
     return nData; 
    }; 

    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: divId, 
      height: 275, //little bigger than alotted height to make more readable 
      width: width //dependent on #gauges 
     }, 
     title: { 
      text: 'Title', //should all be the same, can make a parameter if need to be different 
      style: { //size of text above 
       fontSize: SizeOfFont 
      } 
     }, 
     xAxis: { 
      categories: quarters, 
      labels: { //size of the Text above^^ 
       style: { 
        fontSize: '10px' 
       } 
      } 
     }, 
     yAxis: { 
      min: 99.8, 
      max: 100,   
      title: { 
       text: 'Percent', //parameter since some are days, percents, etc 
       style: {//size of y axis title 
        fontSize: SizeOfFont 
       } 
      }, 
      labels: { 
       style: {//size of the y axis tick labels 
        fontSize: SizeOfFont 
       } 
      } 
     }, 
     credits: {//gets rid of the highcharts logo in bottom right 
      enabled: false 
     }, 
     legend: {//the legend at the bottom 
      style: { 
       fontSize: '12px' 
      } 
     }, 
     series: [ { 
      type: 'column', 
      name: currentName, 
      data: preprocessData(current, goal), 
      dataLabels: { 
       enabled:true, 
       color: 'black', 
       formatter: function() { 
         return (Math.round(this.y*Math.pow(10,3))/Math.pow(10,3) + '%'); //rounds to 2 decimals 
        }, 
        style: { 
        fontSize: '12px' 
       } 
      } 
     },{ 
      type: 'spline', 
      name: 'Goal', 
      data: goal, 
      color: '#084482', 
      marker: { 
       symbol: 'circle' 
      }, 
      dashStyle: 'dash' 
     }] 
    }); 
} 

Answer 1

的顏色系列中的變化。我通過修改預處理數據函數，通過添加seriesColor = colorUse;。我還將seriesColor變量添加到代碼頂部var seriesColor ='＃000';：

添加新功能，以您的代碼：

var seriesColor = '#000'; 
preprocessData = function (data, goal) { 
    var nData = []; 
    var colorGood = '#348017'; var colorBad = '#E42217'; var colorUse; 
    for (var i = 0; i < data.length; i++) { 
     if (data[i] >= goal[i]) { colorUse = colorGood; } 
     else { colorUse = colorBad; } 
     nData.push({ 
      y: data[i], 
      x: i, 
      color: colorUse 
     }); 
    } 
    seriesColor = colorUse; 
    return nData; 
}; 

更新該系列包括seriesColor變量：

series: [ { 
     type: 'column', 
     name: currentName, 
     data: preprocessData(current, goal), 
     color: seriesColor, 
     ... 

我更新了小提琴http://jsfiddle.net/VCjZx/5/