Question

在图表上绘制月份列时，2月和3月之间的空间不一致（较小）：

我似乎无法弄清楚是什么原因造成的。有人知道如何解决吗？

{
  plotOptions: {
    column: {
      color: "#36d",
      pointPadding: 0,
      groupPadding: 0.1,
    }
  },
  xAxis: {
    lineWidth: 0,
    tickWidth: 0,
    labels: {
      style: {
        fontSize: 12
      },
      format: "{value:%b-%y}"
    },
    type: "datetime",
    tickInterval: 28 * 24 * 60 * 60 * 1000,
  },
  yAxis: {
    visible: false
  },
  series: [
    {
      name: "foo",
      type: "column",
      data: [
        {
          x: new Date("2018-01-01T00:00:00.000Z"),
          y: 172.4784
        },
        {
          x: new Date("2018-02-01T00:00:00.000Z"),
          y: 155.7869
        },
        {
          x: new Date("2018-03-01T00:00:00.000Z"),
          y: 172.2465
        },
        {
          x: new Date("2018-04-01T00:00:00.000Z"),
          y: 166.9145
        },
        {
          x: new Date("2018-05-01T00:00:00.000Z"),
          y: 172.4784
        },
        {
          x: new Date("2018-06-01T00:00:00.000Z"),
          y: 166.9145
        },
        {
          x: new Date("2018-07-01T00:00:00.000Z"),
          y: 172.4784
        },
        {
          x: new Date("2018-08-01T00:00:00.000Z"),
          y: 172.4784
        },
        {
          x: new Date("2018-09-01T00:00:00.000Z"),
          y: 166.9145
        },
        {
          x: new Date("2018-10-01T00:00:00.000Z"),
          y: 172.699
        },
        {
          x: new Date("2018-11-01T00:00:00.000Z"),
          y: 166.9145
        },
        {
          x: new Date("2018-12-01T00:00:00.000Z"),
          y: 294.8445
        }
      ]
    },
  ]
}

Answer 1

这是Highcharts datetime轴的自然行为。月的天数不同，因此间隔也不同。要具有相同的间距，可以使用类别：

categories: ["Jan-18","Feb-18","Mar-18","Apr-18","May-18","Jun-18","Jul-18","Aug-18","Sep-18","Oct-18","Nov-18","Dec-18"]

实时演示：http://jsfiddle.net/BlackLabel/604ogcyx/

或使用“断轴”模块删除间隔超过28天的天数：

    chart: {
        events: {
            load: function() {
                var chart = this,
                    points = chart.series[0].points,
                    i = 1;

                for (i; i < points.length; i++) {
                    if (points[i].x.getTime() - points[i - 1].x.getTime() !== monthly) {
                        breaks.push({
                            from: points[i - 1].x.getTime() + monthly,
                            to: points[i].x.getTime(),
                            breakSize: 0
                        });
                    }
                }
                chart.xAxis[0].update({
                    breaks: breaks
                })
            }
        }
    }

API：https://api.highcharts.com/highcharts/xAxis.breaks

实时演示：http://jsfiddle.net/BlackLabel/L5ezt29q/

Highcharts月xAxis 2月列之后的空间不均匀

1 个答案: