更新:
我能够得到的百分比显示,也是一个传奇。但仍然不能改变颜色。
chart: {
type: 'pie',
styledMode: true
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
theme: {
colors: [
'green',
'red',
'fushcia'
]
},
plotOptions: {
pie: {
colors: [
'green',
'red',
'fushcia'
],
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
title: {
text: 'Rundeck Jobs Stats'
},
series: [
{
data: chartData(table)
}
原文:
我有一个饼图从一个HTML表与DataTables生成。我正在查看一列STATUS,它显示成功、失败或中止。该图表正在计算每个事件的发生次数并绘制一个Pie。
我想饼图是绿色的成功,红色的失败和fushcia的流产。
我还想切片显示各自的百分比馅饼。
这是我创建图表的代码,它直接取自https://datatables.net/examples/api/highcharts.html的示例
// Create DataTable
const table = new DataTable('#example');
// Create chart
const chart = Highcharts.chart('demo-output', {
chart: {
type: 'pie',
styledMode: true
},
title: {
text: 'Rundeck Jobs Stats'
},
series: [
{
data: chartData(table)
}
]
});
// On each draw, update the data in the chart
table.on('draw', function () {
chart.series[0].setData(chartData(table));
});
function chartData(table) {
var counts = {};
// Count the number of entries for each position
table
.column(3, { search: 'applied' })
.data()
.each(function (val) {
if (counts[val]) {
counts[val] += 1;
}
else {
counts[val] = 1;
}
});
return Object.entries(counts).map((e) => ({
name: e[0],
y: e[1]
}));
}
我已经看了一些帖子,并试图添加颜色的系列,但还没有喜悦。
thanks in advance
R
1条答案
按热度按时间zpqajqem1#
这是因为你使用
styledMode
:styledMode:布尔值
是否应用样式化模式。在样式模式下,没有表示属性或CSS应用于图表SVG。相反,需要CSS规则来设置图表的样式。默认样式表可从https://code.highcharts.com/css/highcharts.css获得。
你可以像下面这样禁用它,或者用CSS设计你的图表。
示例:https://jsfiddle.net/BlackLabel/hm5nb2o4/
API引用:https://api.highcharts.com/highcharts/chart.styledMode
密码:https://www.highcharts.com/docs/chart-design-and-style/style-by-css