【发布时间】：2014-05-29 22:27:00
【问题描述】：
我有一堆基于日期时间的每月数据点，我需要将它们映射到折线图中。我要完成的工作：
- 我需要在图表上绘制所有点
- 我需要所有 3 个系列的折线图从左下角的第一个数据点（1 月 1 日）开始。
- 第一个数据点需要显示一个文本短语，其余的都需要保留为格式化日期。
请看看我的 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 轴标签与实际数据点不匹配。他们似乎休息了 1 个月。
- 我需要始终显示第一个数据标签，它从 4 月而不是 1 月开始。我还需要第一个 x 轴标签是一个特定的短语，而不是格式化的 31.Jan 日期值。
- 最终的 x 轴数据标签适用于 2015 年 1 月，这甚至不是系列中的数据点。
【问题讨论】：
-
对于#1，这不是 Firefox 中的错误，他们排得很好。这是因为标签之间有很多点，很难分辨两个日期之间的距离。
-
什么不是 Firefox 的错误？如果将鼠标悬停在数据点上，它不会与 x 轴上的标签映射。此外，数据点从第一个 x 轴标签开始向右。最后一个数据点显示 2015 年 1 月，该数据不包含在该系列中。我更新了我的 jsfiddle 链接。
标签： jquery datetime highcharts