하이 차트 - 백분율에 따라 색상을 지정하는 방법

Question

클릭 할 때마다 재구성하는 하이 차트가 있습니다. 차트 값은 쿼리에 의해 동적으로 생성되며이를 Chartdata array으로 푸시합니다.

모든 쿼리 결과 후 가장 큰 조각에 노란색을 주려고하지만 배열 인덱스에서 항상 가장 큰 값이 변경됩니다. 내가 어떻게 해?

var chartDataArray = [ 
    {name:"A", y: 19}, 
    {name:"B", y: 49}, 
    {name:"C", y: 32} 
]; 

항상 'y'가 가장 높은 곳에 노란색으로 표시하고 싶습니다.

Highcharts.chart('container', { 
    chart: { 
    plotBackgroundColor: null, 
    plotBorderWidth: null, 
    plotShadow: false, 
    type: 'pie', 
    style: { 
     fontFamily: 'sfprodisplay', 
     fontSize: '20px', 
     left: '0', 
     top: '0' 
    } 
    }, 

    title: { 
    text: '' 
    }, 
    credits: { 
    enabled: false 
    }, 
    exporting: { 
    enabled: false 
    }, 
    tooltip: { 
    formatter: function() { 
     return this.point.name + '<br/>% ' + Math.round(this.point.percentage) + '<br/>' + (this.point.custom ? this.point.custom : "") 
    } 
    }, 
    plotOptions: { 
    pie: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
     dataLabels: { 
     enabled: true, 
     //format: '% {point.percentage:.0f}<br/>{point.custom}', 
     formatter: function() { 
      return "% " + Math.round(this.point.percentage) + "<br/>" + (this.point.custom ? this.point.custom : this.point.name) 
     }, 
     style: { 
      color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
     } 
     } 
    } 
    }, 

    series: [{ 
    name: '', 
    colorByPoint: true, 
    data: chartData 
    }] 
}); 

Answer 1

당신은 가장 높은 값을 가진 점을 발견하고 render 콜백 함수 내에서 업데이트 할 수 있습니다 :

이

var renderEnabled = true; 

(...)  

events: { 
    render: function() { 
    if (renderEnabled) { 
     var maxPoint; 

     this.series[0].points.forEach(function(p) { 
     if (!maxPoint || maxPoint.y < p.y) { 
      maxPoint = p; 
     } 
     }); 

     renderEnabled = false; // update() calls render() - prevent infinite recursive loop by disabeling render 
     maxPoint.update({ 
     color: 'yellow' 
     }); 
     renderEnabled = true; // enable render() after update() is finished 
    } 
    } 
} 

라이브 작업 데모 : 새 데이터를http://jsfiddle.net/kkulig/8ztqh0gw/

모든 시간을 설정 render도 발사됩니다.

API 참조 : I 배열을 정렬하고 chartDataArray 색상을 밀어 해결

• http://api.highcharts.com/highcharts/chart.events.render
• http://api.highcharts.com/class-reference/Highcharts.Point.html#update

Answer 2

.

var colors = ['#ffc843', '#192126', '#474d51', '#757a7d', '#a3a6a8']; 

function myFunction() { 
    chartDataArray.sort(function (a, b) { 
     return b.y - a.y 
    }); 
} 
myFunction(); 

for (var c = 0; c < chartDataArray.length; c++) { 
    chartDataArray[c].color = colors[c]; 
}