如何根据高图的楔形值设置饼图楔形颜色? [英] How to set pie chart wedge colors based on wedge values for highcharts?

问题描述

我正在Highcharts中建立饼图: http://jsfiddle.net/y3j8ybrg/

I'm building a pie chart in Highcharts: http://jsfiddle.net/y3j8ybrg/

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

I want to be able to set the background color of each wedge based on the value of the data that wedge represents.

API文档似乎没有提供此功能.它显示了如何使用闭包或函数来生成colors数组，但没有说明如何使该函数访问点值.

The API documentation doesn't seem to make this available. It shows how one can use a closure or function to generate the colors array but not how one can give that function access to the point value.

HTML:

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

JavaScript:

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'
            ]})(),
        }],
    });
});

推荐答案

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

Probably best to either pre-calculate the colors and create the data array as {x: 'empty', y: 56.00, color: '#somecolorhex',.. or to update the colors on load in a chart.events.load call. You could add the getColor() function in the data element as well but you would have to repeat the data value.

  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

这篇关于如何根据高图的楔形值设置饼图楔形颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！