如何在高图中的堆叠条形图内部显示文本

时间:2019-06-05 18:02:49

标签: charts highcharts

如何在高图表堆积条形图(https://www.highcharts.com/demo/bar-stacked)的堆积部分中插入文本。

我的图表实际上只有两列,并且它们的y轴反向显示为:https://jsfiddle.net/ogjz9ra0/

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
        categories: ['Bananas']
    },
    colors: ['#1b98ee', '#1366a6'],
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
    },
    legend: {
        reversed: true,
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'John',
        data: [4726.78]
    }, {
        name: 'Brian',
        data: [4250.00],
    }]
});

我想要的是能够将文本注入每个列中。

https://drive.google.com/file/d/1CDttfeB9mqI5r9voYalsLtEeH0OSs3Ey/view?usp=sharing

我对HighCharts还是比较陌生,因此将不胜感激。

非常感谢大家!

我进行了一次谷歌搜索,大多数结果都谈到了将文本呈现在非堆叠条形图中的条形图内。请注意,我要解决的问题放在中心位置。

1 个答案:

答案 0 :(得分:1)

您可以像这样使用datalabels documentation

plotOptions: {
  series: {
    stacking: 'normal',
    dataLabels: {
      enabled: true,
      formatter: function() {
        // console.log(this) // uncomment this line to see all params available
        return 'custom text here'
      }
    }
  }
},

Fiddle