[英]Set Color for Pie Chart using HighChart + JSON data
我正在從以JSON格式存儲的數據生成餅圖。 我正在嘗試根據JSON值更改顏色。
例如:如果值@ 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>
我們可以僅在調用“圖表”之前在getData函數中設置顏色嗎?還是我需要使用Highcharts.setOptions()並定義顏色代碼。
更好的選擇是根據您的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;
要么
看看這個更簡單的版本
$( 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>
我們可以通過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,
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.