데이터를 기반으로 범례 색 상위 차트 변경

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/