highcharts - 如何在highcharts的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/

标签： highcharts

Answer 1

我在这里有一个完整的例子（任何问题让我知道）。

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

此外，在 Stack Overflow Snippet 中：

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: { // do display the year
            month: '%b %y',
            year: '%Y'
        },
        title: {
            text: 'Date'
        },
        /*tickInterval: 1*/
        tickPixelInterval: 100
    },
    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>

输出：

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

这是通过 完成的.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]
]

还要修改刻度：

要修改刻度，您可以像这样修改（使用tickPixelInterval: 60等）：

 xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%b',
            year: '%Y'
        },
        title: {
            text: 'Date'
        },
        /* tickInterval: 1 */
        tickPixelInterval: 60
    },

然后我们得到：

或者tickPixelInterval: 20我们得到：

要进一步修改刻度，您可以尝试以下操作：

xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // do display the year
            month: '%b %y',
            year: '%Y'
        },
        title: {
            text: 'Date'
        },
        /*tickInterval: 1*/
        tickPixelInterval: 10
    }

然后输出还包括月份视图中的年份，如下所示：

例子：

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: { // do display the year
            month: '%b %y',
            year: '%Y'
        },
        title: {
            text: 'Date'
        },
        /*tickInterval: 1*/
        tickPixelInterval: 10
    },
    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>

或 jsfiddle 中的演示：https ://jsfiddle.net/alexander_L/6p1nk73y/20/