如何在高图中的x轴标签中显示月份

Question

问题我有x轴的数据为xAxisLabel ['Jul 16'，'Oct 16'，'Jan 17'，'May 17'，'Jul 17'，'Oct 17'，'Jan 18'，' [Apr 18'，'Aug 20'，'Sep 20']，其长度可能会有所不同。无论数据长度是多少，我都必须在x轴上仅显示8个标签，即跳过间隔将通过将数据长度除以8来确定。解决方案尝试我尝试使用tickPositioner仅传递8个日期。但是不知何故，它没有显示出来。

xAxis: {
        tickPositioner: function() {
        let dataDisplay=[]
        let xAxisLabel=['Jul 16', 'Oct 16', 'Jan 17', 'May 17', 'Jul 17', 'Oct 17', 'Jan 18', 'Apr 
        18','Aug 20','Sep 20'];
        let steps = xAxisLabel.length/8
        for(let i=0,k=0;k<8;i+=steps,k++){

            dataDisplay[k] = xAxisLabel[i]

        }
        return dataDisplay;
    },
        labels:{
            enabled:true,
            formatter: function(){
                   return this.value;
                }
                },

            },

任何人都可以帮助实现期望的结果吗？这是小提琴https://jsfiddle.net/harshita_97/sd3trebz/20/

Answer 1

我在这里有完整的示例（任何问题都让我知道）。

https://jsfiddle.net/alexander_L/6p1nk73y/14/

另外，这里也是堆栈溢出摘要：

let xAxisLabel=['Jul 16', 'Oct 16', 'Jan 17', 'May 17', 'Jul 17', 'Oct 17', 'Jan 18', 'Apr 18','Aug 20','Sep 20', 'Oct 20', 'Dec 20'];
let yAxisData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];

//const newDate = new Date('Jul 1 16'); //test it parses data correctly
const myData = xAxisLabel.map((child,index) => {
	const modString = child.replace(/ /, " 1 ");
  const newDate = new Date(modString);
  const month = newDate.getMonth();
  const year = newDate.getFullYear();
  return [Date.UTC(year, month, 1),yAxisData[index]]
});

//console.log(myData)
        
Highcharts.chart('container', {
		chart: {
        type: 'spline'
    },
    title: {
        text: 'Example data'
    },
    subtitle: {
        text: 'Irregular time data in Highcharts JS'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%b',
            year: '%Y'
        },
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'Some Example Values'
        },
        min: 0
    },
    series: [{
        name: "my Example Data",
        data: myData     
    }],
    plotOptions: {
        series: {
            marker: {
                enabled: true
            }
        }
    },
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>

输出：

重要的是将字符串解析为真实日期，然后将它们作为2D数组添加到数据中。

这是通过.map()完成的，本质上是将两个数组压缩在一起：

let xAxisLabel=['Jul 16', 'Oct 16', 'Jan 17', 'May 17', 'Jul 17', 'Oct 17', 'Jan 18', 'Apr 18','Aug 20','Sep 20', 'Oct 20', 'Dec 20'];
let yAxisData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];

//const newDate = new Date('Jul 1 16'); //test it parses data correctly
const myData = xAxisLabel.map((child,index) => {
    const modString = child.replace(/ /, " 1 ");
  const newDate = new Date(modString);
  const month = newDate.getMonth();
  const year = newDate.getFullYear();
  return [Date.UTC(year, month, 1),yAxisData[index]]
});

实质上是提供此数据结构：

[
  [1467331200000, 29.9]
  [1475280000000, 71.5]
  [1483228800000, 106.4]
  [1493596800000, 129.2]
  [1498867200000, 144]
  [1506816000000, 176]
  [1514764800000, 135.6]
  [1522540800000, 148.5]
  [1596240000000, 216.4]
  [1598918400000, 194.1]
  [1601510400000, 95.6]
  [1606780800000, 54.4]
]