jQuery HighCharts：DateTime X轴数据标签问题

Question

我有一堆每月的基于日期时间的数据点，需要在折线图中进行映射。 我要完成的工作：

1. 我需要在图表上绘制所有点
2. 我需要所有3系列的折线图从左下角（1月1日）的第一个数据点开始。
3. 第一个数据点需要显示一个文本短语，其余所有数据都需要保留为格式化日期。

请看看我的jsfiddle。 http://jsfiddle.net/FWGdw/7/

$(function () {
    $('#container').highcharts({
        chart: { type: 'spline' },
        title: { text: 'Performance Chart' },
        subtitle: { text: 'monthly Date inverval' },
        xAxis: { 
            type: 'datetime',
            dateTimeLabelFormats: { month: '%b-%y', year: '%b-%y'},
            /*showFirstLabel: false,
            startOnTick: true*/

        },
        yAxis: { min: 0 },
        tooltip: { headerFormat: '<b>{series.name}</b><br>', 
                  pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'},
        series: [{
            name: '1st Series',
            data: [
                [Date.UTC(2013, 0, 31), 0],
                [Date.UTC(2013, 1, 28), 0.6],
                [Date.UTC(2013, 2, 31), 1.7],
                [Date.UTC(2013, 3,  30), 2.8],
                [Date.UTC(2013, 4,  31), 0.6],
                [Date.UTC(2013, 5, 30), 3.6],
                [Date.UTC(2013, 6, 31), 3.6],
                [Date.UTC(2013,  7,  31), 2.81],
                [Date.UTC(2013,  8,  30), 0.78],
                [Date.UTC(2013,  9, 31), 0.98],
                [Date.UTC(2013,  10, 30), 1.84],
                [Date.UTC(2013,  11, 31), 1.80],
                [Date.UTC(2014, 0, 31), 0],
                [Date.UTC(2014, 1, 28), 0.6],
                [Date.UTC(2014, 2, 31), 0.7],
                [Date.UTC(2014, 3,  30), 0.8],
                [Date.UTC(2014, 4,  31), 0.6],
                [Date.UTC(2014, 5, 30), 0.6],
                [Date.UTC(2014, 6, 31), 0.6],
                [Date.UTC(2014,  7,  31), 0.81],
                [Date.UTC(2014,  8,  30), 0.78],
                [Date.UTC(2014,  9, 31), 0.98],
                [Date.UTC(2014,  10, 30), 1.84],
                [Date.UTC(2014,  11, 31), 1.80]
            ]
        }, {
            name: '2nd Series',
            data: [
                [Date.UTC(2013, 0, 31), 1],
                [Date.UTC(2013, 1, 28), 3.6],
                [Date.UTC(2013, 2, 31), 2.2],
                [Date.UTC(2013, 3,  30), 4.2],
                [Date.UTC(2013, 4,  31), 4.6],
                [Date.UTC(2013, 5, 30), 5.6],
                [Date.UTC(2013, 6, 31), 0.6],
                [Date.UTC(2013,  7,  31), 0.21],
                [Date.UTC(2013,  8,  30), 2.78],
                [Date.UTC(2013,  9, 31), 0.98],
                [Date.UTC(2013,  10, 30), 2.84],
                [Date.UTC(2013,  11, 31), 1.80],
                [Date.UTC(2014, 0, 31), 4],
                [Date.UTC(2014, 1, 28), 3.6],
                [Date.UTC(2014, 2, 31), 5.7],
                [Date.UTC(2014, 3,  30), 4.8],
                [Date.UTC(2014, 4,  31), 2.6],
                [Date.UTC(2014, 5, 30), 0.1],
                [Date.UTC(2014, 6, 31), 0.9],
                [Date.UTC(2014,  7,  31), 0.81],
                [Date.UTC(2014,  8,  30), 3.78],
                [Date.UTC(2014,  9, 31), 0.98],
                [Date.UTC(2014,  10, 30), 1.84],
                [Date.UTC(2014,  11, 31), 1.80]
            ]
        }, {
            name: '3rd Series',
            data: [
                [Date.UTC(2013, 0, 31), 0],
                [Date.UTC(2013, 1, 28), 0.6],
                [Date.UTC(2013, 2, 31), 0.7],
                [Date.UTC(2013, 3,  30), 0.8],
                [Date.UTC(2013, 4,  31), 0.6],
                [Date.UTC(2013, 5, 30), 0.6],
                [Date.UTC(2013, 6, 31), 0.6],
                [Date.UTC(2013,  7,  31), 1.81],
                [Date.UTC(2013,  8,  30), 7.78],
                [Date.UTC(2013,  9, 31), 7.98],
                [Date.UTC(2013,  10, 30), 1.2],
                [Date.UTC(2013,  11, 31), 1.80],
                [Date.UTC(2014, 0, 31), 0],
                [Date.UTC(2014, 1, 28), 0.6],
                [Date.UTC(2014, 2, 31), 2.2],
                [Date.UTC(2014, 3,  30), 4.8],
                [Date.UTC(2014, 4,  31), 0.6],
                [Date.UTC(2014, 5, 30), 0.6],
                [Date.UTC(2014, 6, 31), 2.6],
                [Date.UTC(2014,  7,  31), 1.81],
                [Date.UTC(2014,  8,  30), 1.78],
                [Date.UTC(2014,  9, 31), 3.98],
                [Date.UTC(2014,  10, 30), 2.84],
                [Date.UTC(2014,  11, 31), 1.80]
            ]
        }]
    });
});

1. x轴标签未与实际数据点对应。 他们似乎休了一个月。
2. 我需要始终显示第一个数据标签，它从4月而不是1月开始。 我还需要第一个x轴标签是特定短语，而不是格式化的31.Jan日期值。
3. 最终的x轴数据标签适用于2015年1月，这甚至不是该系列中的数据点。

Answer 1

好的，我们在这里：

x轴标签未与实际数据点对应。 他们似乎休了一个月。

他们很好，请考虑一下第一点： Date.UTC(2013, 0, 31) -> 1月31日。 Axis的标签始终显示在每月的1号。

我需要始终显示第一个数据标签，它从4月而不是1月开始。

创建自己的tickPositioner 。

我还需要第一个x轴标签是特定短语，而不是格式化的31.Jan日期值。

使用labels.formatter 。 使用this.isFirst确定第一个标签。

最终的x轴数据标签适用于2015年1月，这甚至不是该系列中的数据点。

设置maxPadding = 0。