在柱形图上显示数据标签（总计和数据标签名称）- ReactJs highcharts
我正在使用按列高图分组。例如：https: //jsfiddle.net/2bvudw1m/
有没有一种方法可以显示代表列的计数y（在列系列的顶部）和数据标签名称（在底部）的数据标签？例如：这是我的系列数据：
series: [{
name: 'active',
data: [53, 33, 43, 63, 7, 83],
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.name;
}
}
}, {
name: 'new',
data: [33, 43, 43, 63, 73, 8],
}]
我想展示两件事：
计数代表每个系列
该系列的 DataLabel
到目前为止我有这个：
$(function() {
$('#container').highcharts({
chart: {
type: 'column',
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Apples2', 'Oranges2','Apples3', 'Apple33'],
offset: 30
},
yAxis: {
allowDecimals: false,
//offset:10,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'top',
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
},
column: {
stacking: ''
},
},
series: [{
name: 'active',
data: [53, 33, 43, 63, 7, 83],
dataLabels: {
enabled: true,
verticalAlign: 'bottom',
overflow: 'none',
crop: false,
y: 20,
formatter() {
return this.series.userOptions.name;
}
}
}, {
name: 'new',
data: [33, 43, 43, 63, 73, 8],
}
]
});
});
https://jsfiddle.net/nec89t56/2/
但是，这不起作用，因为当我尝试添加两个值时，它会添加计数y或名称。有没有一种方法可以同时添加列grouped: true和stacking: ""
注意：我不能像“正常”那样堆叠，因为它会堆叠而不是分组，这不是我想要的。
有任何想法吗？
森栏1回答
-
开心每一天1111
您可以dataLabels通过定义dataLabels为对象数组来添加多个，其中每个对象都是每个数据标签的单独配置。演示： https: //jsfiddle.net/BlackLabel/op4ehx8m/plotOptions: { series: { dataLabels: [{ enabled: true, verticalAlign: 'bottom', overflow: 'none', crop: false, y: 20, formatter() { return this.series.userOptions.name; } }, { enabled: true }] }, column: { stacking: '' },},
随时随地看视频慕课网APP
相关分类
JavaScript