highcharts zoomable 6个月线图

Question

我想要一个6个月的图表，默认情况下显示每月视图，但是缩放到一天。

今天我们那6月在图表中，我们有：

xAxis: { 
title: { 
text: 'Temperature' 
}, 
categories: ['Oct','Nov','Dec','Jan','Feb','Mar',] 
series: [ 
{ name: 'my series', 
visible: true, 
data: [5,10,15,5,7,8,]}, 
{ name: 'another series', 
visible: true, 
data: [0,0,0,146,80,0,]}, 

这每月的伟大工程。

要获得每日数据，我可以将约30 * 6个元素推入数据中。此外，我试着使用：

pointStart: Date.UTC(2010, 11, 1), 
pointInterval: 30 * 24 * 3600 * 1000 // one day 

这样的例子：http://jsfiddle.net/7Mmee/9/

但问题是不是每个月有30天，也该图表的底部不显示的类别。

我确定有一个简单的方法来做到这一点，我失踪了。

感谢 乔尔

Answer 1

看起来好像你试图每月显示一个数据点。如果是这种情况，我建议一次分配每个数据点并更改日期格式化程序。

//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} 
     ] 
    }] 
}); 

但是，它也似乎你想缩小到'天'的水平。如果是这种情况，则将所有数据点添加到系列中并使用高位图'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} 
     ] 
    }] 
}); 

Answer 2

我认为这将工作：

您可以将您的数据作为对时间戳和值，看看这个例子：http://jsfiddle.net/CAKQH/310/