Highcharts - 自定义颜色应用于渐变

这是我的数据模型：Highcharts - 自定义颜色应用于渐变

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中提取颜色。
有什么想法？非常感谢。

编辑，解决

放弃了:)。
我最终创建了颜色阵列，如高图演示中所述。
它运作良好。

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

来源

2013-06-04 Jara

“数据”实际上是复数。正确的用法是“数据是”而不是“数据”，单个数据就是“数据”。虽然我们从来不这样用。 – bcr

改进:) Thx。 – Jara

@Jara所以问题解决了？ –

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

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

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”拍摄图表数据输入，查找的“颜色”元素，则基于所述相同颜色的Highcharts梯度替换它。

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

来源

2015-03-09 02:43:04 Dustin

Highcharts - 自定义颜色应用于渐变

回答

相关问题