使用 HighChart + JSON 数据设置饼图颜色

Question

我正在根据以 JSON 格式存储的数据生成饼图。我正在尝试根据 JSON 值更改颜色。

Ex：如果值@json[0]['data'][0][0] = "FAILED" //setColor(RED)。

我能够使用 options.series.color 设置柱形堆栈图的颜色，但是当我尝试将此选项与饼图一起使用时，它会将数据转换为系列并且无法在容器上呈现图表。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
  function getData(id) {
    $.getJSON("pie.php", {
      id: id
    }, function(json) {
      option.series = json;
      chart = new Highcharts.chart(options);
    });
  }
</script>

我们能否仅在调用 'chart' 之前在 getData 函数中设置颜色，还是我需要使用 Highcharts.setOptions() 并定义颜色代码。

Answer 1

我们可以通过setOption函数设置highchart自定义颜色，如

Highcharts.setOptions({
  colors: ['#F64A16', '#0ECDFD',]
});

它为我的饼图设置了颜色。

动态 3D 颜色的另一种解决方案

实际上这个主题选择的自定义就是这里

3 种颜色设置为颜色变量

var colors = Highcharts.getOptions().colors;
        $.each(colors, function(i, color) {
            colors[i] = {
                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                stops: [
                    [0, '#0ECDFD'],
                    [0.3, '#F64A16'],
                    [1, color]
                ]
            };

        });

&直接串联赋值

 {
  type : 'column',
    name : 'bug',
    data : [],
    color : colors,                 
    pointWidth : 28,
}

Answer 2

更好的选择是根据您的 json 数据创建系列。这是根据数据指定颜色的方法。

var serie = {
    data: []
};
var series = [serie];

jQuery.each(jsonData, function(index, pointData) {

    var point = {
        name: pointName,
        y: pointData.Value,
        color: pointData.Value == 'FAILED' ? 'ff0000' : '00ff00',    
        serverData: pointData
    };

    serie.data.push(point);
});
chart.series = series;

或

看看这个更简单的版本

JSFiddle

$( document ).ready(function() {

var data = [{
    "name": "Tokyo",
    "data": 3.0
}, {
    "name": "NewYork",
    "data": 2.0
}, {
    "name": "Berlin",
    "data": 3.5
}, {
    "name": "London",
    "data": 1.5
}];

    
// Highcharts requires the y option to be set
$.each(data, function (i, point) {
    point.y = point.data;
    point.color = parseFloat(point.data) > 3 ? '#ff0000' : '#00ff00';
});


var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'pie'
    },

    series: [{
        data: data
    }]

});
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

使用 HighChart + JSON 数据设置饼图颜色

Set Color for Pie Chart using HighChart + JSON data

javascript

highcharts

highstock