如何将xAxis标签格式化为Highcharts中每个值的日期？

Question

我正在尝试创建一个简单的折线图。如您所见，数据已格式化，因此数组中的第一个值是日期（年-月），然后是一个值。我可以根据需要更改日期的格式，但通常每个月的数据始终按升序排列，直到当前月份。

是否可以设置图表格式，以便在底轴上带有日期（年+月）的标签？这是我的工作示例的Codepen，如果需要，这是original Highchart example。

Highcharts.chart("container", {
  series: [
    {
      data: [
        ["2018-10", 18],
        ["2018-11", 16],
        ["2018-12", 21],
        ["2019-01", 22],
        ["2019-02", 22],
        ["2019-03", 20],
        ["2019-04", 22],
        ["2019-05", 24],
        ["2019-06", 25],
        ["2019-07", 31],
        ["2019-08", 35],
        ["2019-09", 33],
        ["2019-10", 35],
        ["2019-11", 35],
        ["2019-12", 35]
      ]
    }
  ]
});

这是我的目标

如果我可以更轻松地在其他库中完成此操作，欢迎提出建议。

Answer 1

我设法做到了这一点

Highcharts.chart("container", {
    xAxis: {
        type: 'datetime',
        labels: {
            formatter() {

                // get data from series, "this.value" is a key for each array
                var currentData = this.chart.userOptions.series[0].data[this.value];

                // split "2018-10" into array and return each on new line
                var currentData = currentData[0].split('-');
                return currentData[1] + '<br>' + currentData[0];

            }
        }

    },

  series: [
    {
      data: [
        ["2018-10", 18],
        ["2018-11", 16],
        ["2018-12", 21],
        ["2019-01", 22],
        ["2019-02", 22],
        ["2019-03", 20],
        ["2019-04", 22],
        ["2019-05", 24],
        ["2019-06", 25],
        ["2019-07", 31],
        ["2019-08", 35],
        ["2019-09", 33],
        ["2019-10", 35],
        ["2019-11", 35],
        ["2019-12", 35]
      ]
    }
  ]
});

Answer 2

您可以按照这种方式进行操作，使用类型category将给出系列的xaxis

 xAxis: {
   type: 'category',
   labels: {
        formatter: function () {
            var str = this.value.split('-');
            return str[1]+'<br>'+ str[0];
        }
    }
},