如何根据高图的楔形值设置饼图楔形颜色？答案

【问题标题】：How to set pie chart wedge colors based on wedge values for highcharts?如何根据高图的楔形值设置饼图楔形颜色？
【发布时间】：2017-01-19 15:35:13
【问题描述】：

我正在 Highcharts 中构建一个饼图： http://jsfiddle.net/y3j8ybrg/

我希望能够根据楔形所代表的数据值设置每个楔形的背景颜色。

API 文档似乎没有提供此功能。它展示了如何使用闭包或函数来生成颜色数组，但没有展示如何让该函数访问点值。

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button">Add point</button>

JavaScript：

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: '#323f48',
            plotBorderColor: '#323f48',
            plotBorderWidth: 0,
            plotShadow: false,
            backgroundColor: '#323f48',
            borderColor: '#323f48'
        },
        title: {
            text: 'CHART<br/><span class="white">sub-header</span>',
            align: 'center',
            verticalAlign: 'middle',
            y: -3,
            style: {
              fontWeight: 'bold',
              color: 'white',
              fontSize: '10px'
            }
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {

                dataLabels: {
                    enabled: true,
                    distance: -510,
                    style: {
                        fontWeight: 'bold',
                        color: '#323f48'
                    }
                },
                startAngle: -180,
                endAngle: 180,
                center: ['50%', '50%'],
                animation: false,
                borderColor: '#323f48',
                borderWidth: '0px'
            }
        },
        series: [{
            type: 'pie',
            name: 'days',
            innerSize: '90%',
            data: [
                ['empty',       56.00],
                ['days',        44.00],
            ],
            // I want this to be a function that returns a color depending upon the data series point value.
            colors: (function(){return [
              '#59636b',
              '#8edd65'
            ]})(),
        }],
    });
});

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

最好预先计算颜色并将数据数组创建为{x: 'empty', y: 56.00, color: '#somecolorhex',.. 或在chart.events.load 调用中更新加载颜色。您也可以在数据元素中添加getColor() 函数，但您必须重复数据值。

  getColor = function(val) {
    if (val >= 50) {
      return 'red'
    } else {
      return 'blue'
    }
  }

series: [{
  type: 'pie',
  name: 'days',
  innerSize: '90%',
  data: [{
    x: 'empty',
    y: 56.00,
    color: getColor(56.00)
  }, {
    x: 'days',
    y: 44.00,
    color: getColor(44.00)
  }]
}]

示例jsfiddle

【讨论】：