我正在使用highchart的甜甜圈图。我想手动更改图表各部分的颜色。假设我想从我的代码中获得Equity:red,Debt:blue,Large Cap:Green,Multi cap:Brown等。我怎样才能做到这一点?如果有人有什么想法请与我分享。我指的是这张图。
我的代码添加如下
function print_chart(equity_data,debt_data, equity_percent , debt_percent )
{
$(function () {
var donut_data_param;
var colors = ['#483D8B','#458B00'];
donut_data_param = [{
y: equity_percent,
color: colors[0],
drilldown: {
name: 'Equity',
categories: ['Large Cap', 'Multi Cap', 'Mid & Small Cap','Eq Hybrid'],
data: equity_data,
color: colors[0]
}
}, {
y: debt_percent,
color: colors[1],
drilldown: {
name: 'Debt',
categories: ['Liquid', 'Ultra short' ,'short','Debt Hybrid','FD'],
data: debt_data,
color: colors[1]
}
}];
var categories = ['Equity','Debt'],
data = donut_data_param,
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#mychart').highcharts({
chart: {
type: 'pie',
marginBottom: -40,
marginTop: -10
},
legend: {
layout: 'vertical',
floating: true,
align: 'left',
verticalAlign: 'top',
symbolPadding: 20,
symbolWidth: 10,
y: 100
}, credits: {
enabled: false
},
exporting: { enabled: false },
title: {
text: ''
},
// subtitle: {
// text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
// },
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Percentage',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Percentage',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
enabled: false
},
showInLegend: false
}]
});
});
}
得到了解决方案。http://jsfiddle.net/faywp9w3/
改变了这个:- color: data[i].drilldown.colors[j]
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: data[i].drilldown.colors[j]
});
}
宣告: var colors = ['#0000ff','#458B00','#658300'];
并colors: [colors[2],colors[1],colors[2],colors[1]]
在钻取中添加以下内容:
drilldown: {
name: 'Equity',
categories: ['Large Cap', 'Multi Cap', 'Mid & Small Cap','Eq Hybrid'],
data: equity_data,
colors: [colors[2],colors[1],colors[2],colors[1]]
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句