如何根据Highchart中的百分比给出颜色 - JavaScript

Question

我有每次点击后重建的Highchart。图表值是通过查询动态创建的，我将它们推送到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出处：

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

Answer 2

我通过排序阵列和推颜色chartDataArray解决。

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]; 
}