Highcharts 中具有单独数据的堆栈标签
stackLabels with separate data in Highcharts
下午好,我正在整理一个使用 Highcharts stackLabels 的图表,它与这个完全一样:JSFiddle 但是我不希望它显示列值的总和,我希望它按项目显示一项在另一项之上,与我在下面模拟的打印相同:
为了按照您的预期设置 stackLabels
,您需要使用 stackLabels.formatter
函数手动计算标签值。
接下来您要做的是对标签进行一些调整。您可以通过 stackLabels.y
字段来完成。
最后,不要忘记 stackLabels.useHTML
参数设置为 true
。它使 <span>
和 </br>
元素将正确显示。请看下面的代码:
yAxis: {
stackLabels: {
style: {
color: 'red'
},
enabled: true,
useHTML: true,
formatter: function() {
var firstLabel = Math.round((this.points[0][1] - this.points[0][0]) * 10) / 10,
secondLabel = this.points[0][0]
return `<span>${firstLabel}</span></br>
<span>${secondLabel}</span>`
},
y: -15
}
}
您可以在此处阅读有关上述参数的更多信息:
下午好,我正在整理一个使用 Highcharts stackLabels 的图表,它与这个完全一样:JSFiddle 但是我不希望它显示列值的总和,我希望它按项目显示一项在另一项之上,与我在下面模拟的打印相同:
为了按照您的预期设置 stackLabels
,您需要使用 stackLabels.formatter
函数手动计算标签值。
接下来您要做的是对标签进行一些调整。您可以通过 stackLabels.y
字段来完成。
最后,不要忘记 stackLabels.useHTML
参数设置为 true
。它使 <span>
和 </br>
元素将正确显示。请看下面的代码:
yAxis: {
stackLabels: {
style: {
color: 'red'
},
enabled: true,
useHTML: true,
formatter: function() {
var firstLabel = Math.round((this.points[0][1] - this.points[0][0]) * 10) / 10,
secondLabel = this.points[0][0]
return `<span>${firstLabel}</span></br>
<span>${secondLabel}</span>`
},
y: -15
}
}
您可以在此处阅读有关上述参数的更多信息: