Question

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

我需要在图表上绘制所有点
我需要在左下角（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]
            ]
        }]
    });
});

x轴标签不会映射实际数据点。他们似乎有一个月了。
我需要始终显示第一个数据标签，它从4月开始，而不是1月。我还需要将第一个x轴标签作为特定短语，而不是格式化的31.Jan日期值。
最终x轴数据标签是2015年1月，甚至不是该系列中的数据点。

Answer 1

好的，我们在这里：

x轴标签不会映射实际数据点。他们看起来好一个月了。

他们没事，考虑第一点：Date.UTC(2013, 0, 31) - ＆gt;这是1月31日。 Axis的标签始终显示在第1个月。

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

创建自己的tickPositioner。

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

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

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

设置maxPadding = 0。

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

1 个答案: