时间戳

首页 > 解决方案 > Highcharts：条形柱在x轴上以统一的方式对齐

highcharts - Highcharts：条形柱在x轴上以统一的方式对齐

问题描述

在此处输入图像描述

上图是由我使用下面给出的选项生成的：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Browser market shares. January, 2018'
    },
    subtitle: {
        text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
    },
    accessibility: {
        announceNewData: {
            enabled: true
        }
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    series: [
    {name: "Data A", data: [4], _colorIndex: 0},
    {name: "Data B", data: [7], _colorIndex: 1},
    {name: "Data C", data: [9], _colorIndex: 2},
    {name: "Data D", data: [19], _colorIndex: 3}
]
});

目前，问题是生成的列自动堆叠在中间。我的要求是，它必须从头到尾沿 x 轴均匀分布。有什么可用的选项吗？任何帮助将不胜感激。

标签： highchartsbar-chart

解决方案

您可以通过将所有列呈现为一个系列的数据（而不是将每个点作为单独的系列）来实现此效果。

  series: [{
    name: '',
    data: [{
      name: "Data A",
      y: 4
    }, {
      name: "Data B",
      y: 7
    }, {
      name: "Data C",
      y: 9
    }, {
      name: "Data D",
      y: 19
    }],
    colorByPoint: true
  }]

演示：https ://jsfiddle.net/BlackLabel/oLg3f7h2/

推荐阅读