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 - 自定義顏色應用於漸變

回答

相關問題