看起来好像您正试图每月显示一个数据点。如果是这种情况,我建议为每个数据点分配一个时间并更改日期格式化程序。
//Example 1: Each data point has a time, with a date formatter:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { //custom date formats for different scales
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b', //month formatted as month only
year: '%Y'
}
},
series: [{
data: [
{x: Date.UTC(2010, 0, 1), y: 1}, //one data point for each month
{x: Date.UTC(2010, 1, 1), y: 4},
{x: Date.UTC(2010, 2, 1), y: 9},
{x: Date.UTC(2010, 3, 1), y: 16},
{x: Date.UTC(2010, 4, 1), y: 25},
{x: Date.UTC(2010, 5, 1), y: 36}
]
}]
});
但是,您似乎也想缩小到“日”级别。如果是这种情况,将所有数据点添加到系列中是有意义的,并使用 highcharts 的zoomType
属性,也许与日期格式化程序结合使用。
//Example 2: Each data point represents a day, and we use the 'zoomType' feature:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime',
zoomType: 'x'
},
series: [{
data: [
{x: Date.UTC(2010, 0, 1), y: 1}, //one data point for each day
{x: Date.UTC(2010, 0, 2), y: 1.1},
{x: Date.UTC(2010, 0, 3), y: 1.4},
{x: Date.UTC(2010, 0, 4), y: 1.8},
{x: Date.UTC(2010, 0, 5), y: 2.5},
{x: Date.UTC(2010, 0, 6), y: 3.8}
]
}]
});