1

这是我的数据模型：

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

这是官方的highcharts演示：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
            ]
        };
    });
4

1 回答 1

0

上面提到的解决方案将颜色设置为全局默认值。如果您只有一个图表，这没关系，但如果您有多个图表，则可能会出现问题，因为颜色将适用于所有图表。

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

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({
    // ....

上面的 'colorizeData' 接受图表数据输入，寻找 'color' 元素，然后将其替换为基于相同颜色的 Highcharts 渐变。

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

于 2015-03-09T02:43:04.000 回答