Question

这是我的数据模型：

data = [{y: 123, color: "#FF7600"}, {y: 321, color: "#00FFE3"}, {y: 213,color: "#444444"}]

然后将系列添加到饼图中：

$http({ method: 'GET', url: /pie-chart, params: {})
    .success(function (data) {
        chart.addSeries({
        type: 'pie',
        data: data
    })
});

这是官方的高级演示：http://www.highcharts.com/demo/pie-gradient
它循环读取数据，读取颜色，创建颜色数组，并在绘制图表时使用此数组但我正在考虑避免从JSON中提取颜色的解决方案任何的想法？非常感谢。

已编辑，已解决

给它:) 我最终创建了颜色数组，如highcharts演示中所述它运作良好。

// Get colors from received data, create color array, 
var colors = [];
for (var i = 0; i < data[0].series.length; i++) {
    colors.push(data[0].series[i].color);
    // Delete original colors, so that new radialized are used
    delete(data[i].color);
}

// Use color array and radialize each color
Highcharts.getOptions().colors = Highcharts.map(colors, function(color) {
    return {
        linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
            ]
        };
    });

Answer 1

上述解决方案设置全局默认值中的颜色。如果您只有一个图表，这是可以的，但如果您有多个图表则可能会有问题，因为颜色将适用于所有图表。

您可以通过重新映射本地数据数组中的颜色，在单个图表级别对其进行着色。这是我为饼图做的事情。

chartData是一个数据数组，如：

[
    {
        "color": "#01080f", 
        "name": "No Status", 
        "y": 8570
    }, 
    {
        "color": "#1A942C", 
        "name": "Deployed", 
        "y": 27952
    }, 
    ...
    {
        "color": "#f36e20", 
        "name": "Out of sync", 
        "y": 241
    }
]

在我的javascript代码中，它从服务器检索并应用于Highcharts对象的series.data元素。

在将数据元素添加到highcharts对象之前，只需操作该数据元素即可。

// Retrieve your chart data
$.getJSON('/api/endpoint/policystatus', function (chartData) {

    // Function replaces flat colors with gradients
    function colorizeData(data) {
        data.color = {
            radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
            stops: [
                [0, data.color],
                [1, Highcharts.Color(data.color).brighten(-0.3).get('rgb')] // darken
            ]
        };
    }

    // Call the function for each element in the retrieved data
    chartData.forEach(colorizeData);

    // Continue on to build your chart
    $('#pie-general-status').highcharts({
    // ....

以上＆＃39; colorizeData＆＃39;获取图表数据输入，查找颜色＆＃39;元素，然后用基于相同颜色的Highcharts渐变替换它。

请注意，您必须使用十六进制或RGB值;它不适用于定义为“绿色”字样的颜色。或者＆＃39;蓝色＆＃39;。

Highcharts - 在自定义颜色上应用渐变

1 个答案: