单独设置堆叠列高图数据标签的样式

Styling the stacked column highchart datalabels individually

本文关键字：数据 标签 样式 高图 设置 单独      更新时间：2023-09-26

我的任务是单独设置highcharts的堆叠条形图数据标签:我指的是第一张图中的3,2,5，第二张图中的4,2,3等等。将所有这些样式组合在一起很容易，如文档/fiddle所示。我如何单独设计它们?

小提琴有所有这些样式的代码:

 dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                style: {
                    textShadow: '0 0 3px black'
                }
            }

这是JS提琴按照他们的文档:http://jsfiddle.net/3ak4ckuq/

在数据标签上设置"useHTML: true"。然后，您可以访问任意点的单个datalabel元素，并修改样式或添加类等:

_.each(chart.series, function(serie) {
    _.each(serie.data, function(point) {
        var spanElement = point.dataLabel.div.firstChild;
        spanElement.style.fontSize = _.sample(randomFontSizes);
        spanElement.style.color = _.sample(randomColors);
        spanElement.classList.add("custom-class");
    });
});

参见:http://jsfiddle.net/3ak4ckuq/6/

相关文章：