Highstock tickPixelInterval不起作用

Question

我有一個tickPixelInterval的highstock問題。 當我們點擊縮放按鈕，相應的數據應該顯示。 如果我們點擊Day（1d）按鈕，它應該精確顯示一天中x軸上的數據和日期格式應該從00:00開始，結束日期爲23:59，時間間隔必須爲一個小時。 如果我們點擊1M，3M，6M按鈕，它應該相應地顯示數據，並且X軸間隔的日期格式/間隔必須爲一天。 Highstock有可能嗎？這裏在JSFiddle 我們如何增加x軸的長度？

$(function() { 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { 

     // Create the chart 
     $('#container').highcharts('StockChart', { 


      rangeSelector : { 

      inputEnabled: $('#container').width() > 280, 
      buttons: [{ 
       type: 'day', 
       count: 5, 
       text: '1d' 
      }, { 
       type: 'month', 
       count: 1, 
       text: '1m' 
      }, 
      { 
       type: 'month', 
       count: 3, 
       text: '3m' 
      }, 
      { 
       type: 'month', 
       count: 6, 
       text: '6m' 
      }, { 
       type: 'year', 
       count: 1, 
       text: '1y' 
      }, { 
       type: 'all', 
       text: 'All' 
      }], 
      selected: 0//default show the last 5day's graph 

      }, 

      title : { 
       text : 'AAPL Stock Price' 
      }, 
      xAxis: { 
     type: 'datetime', 
     ordinal: false, 
     tickInterval: 24*60 * 60 * 1000,//For One Day 
     minTickInterval: 60 * 60 * 1000,//For One Hour 
     tickPixelInterval: 300, 
     startOnTick:true, 

    }, 
       scrollbar: { 
      //height: 10, 
      enable: true 
     }, 
      series : [{ 
       name : 'AAPL Stock Price', 
       data : data, 
       marker : { 
        enabled : true, 
        radius : 3 
       }, 
       shadow : true, 
       tooltip : { 
        valueDecimals : 2 
       }, 
       pointInterval: 24*60*60*1000 
      }] 
     }); 
    }); 
}); 

Answer 1

我完全更新了我的答案。我用tickPositioner確保我的xAxis是我想要的。在我的例子（末尾的jsfiddle），當你點擊按鈕或您移動底部的導航儀，x軸被重新定位，有以下行爲：

• 如果範圍是1天最大=> 1勾選每隔一小時
• 如果範圍是1天和1個月之間=>每天1個滴答
• 如果範圍是1個月至1年=>一個月
• 如果超過1年顯示，1每1點每年打勾

您可以填滿y自定義這些值。

爲了避免重複，我還增加了X軸

$(function() { 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { 
     $('#container').highcharts('StockChart', { 
      rangeSelector : { 
       inputEnabled: $('#container').width() > 280, 
       buttons: [{ 
        type: 'day', 
        count: 1, 
        text: '1d' 
       }, { 
        type: 'month', 
        count: 1, 
        text: '1m' 
       }, 
       { 
        type: 'month', 
        count: 3, 
        text: '3m' 
       }, 
       { 
        type: 'month', 
        count: 6, 
        text: '6m' 
       }, { 
        type: 'year', 
        count: 1, 
        text: '1y' 
       }, { 
        type: 'all', 
        text: 'All' 
       }], 
       selected: 0//default show the last day's graph 
      }, 
      title: { 
       text: 'AAPL Stock Price' 
      }, 
      xAxis: { 
       type: 'datetime', 
       ordinal: false, 
       startOnTick: false, 
       minRange: 24 * 60 * 60 * 1000, // One day max zoom 
       labels : { y : 20, rotation: -45, align: 'right' }, 

       tickPositioner: function (min, max) { 
        var xDataRange = max - min, 
         positions = [], 
         tick = min; 

        positions.info = {higherRanks: {}}; 

        if (xDataRange <= 86400000) { 
         // If range is 1 day max => 1 tick every hour 
         increment = 3600000; 
         positions.info.unitName = "hour"; 
        } else if (xDataRange > 86400000 && xDataRange <= 2592000000) { 
         // If range is between 1 day and 1 month => 1 tick every day 
         increment = 86400000; 
         positions.info.unitName = "day"; 
        } else if (xDataRange > 2592000000 && xDataRange <= 31536000000) { 
         // If range is between 1 month and 1 year => 1 tick every month 
         increment = 2592000000; 
         positions.info.unitName = "month"; 
        } else { 
         // If more than 1 year displayed, 1 tick every year 
         increment = 365 * 24 * 60 * 60 * 1000; 
         positions.info.unitName = "year"; 
        } 

        // Create ticks 
        for(tick = min; tick - increment < max; tick += increment) { 
         positions.push(tick); 
        } 
        positions.info.totalRange = positions[positions.length - 1] - positions[0]; 
        return positions; 
       } 
      }, 
      scrollbar: { 
       enable: true 
      }, 
      series : [{ 
       name : 'AAPL Stock Price', 
       data : data, 
       marker : { 
        enabled : true, 
        radius : 3 
       }, 
       shadow : true, 
       tooltip : { 
        valueDecimals : 2 
       }, 
       pointInterval: 24 * 60 * 60 * 1000 // Serie point interval set to 1 day 
      }] 
     }); 
    }); 
}); 

見更新小提琴標籤屬性：http://jsfiddle.net/fe83S/9/

Answer 2

您可以使用或tickInterval或tickPixelInterval，不是他們兩個。

現在，一般Highstock不支持這種功能，但是您可以使用tickPositioner來管理滴答位置。只需返回適當的刻度（時間戳），然後用xAxis.labels.formatter格式標籤來呈現適當的日期格式。