2013-02-19 106 views
2

使用Highstock可以拖動圖表並異步加載數據嗎?Highstock平移異步加載數據

我見過的highcharts網站http://jsfiddle.net/hcharge/5zPLV/

然而,這使用導航/滾動條來移動圖表沿系列,當你停止沿滑動加載數據的異步演示,理想的情況是我想用由於佔用了太多的空間,高架移動而不是導航器的平移能力。

如果關閉導航器和滾動條並禁用zoomtype:x,則演示如何使用演示,然後只要您開始拖動圖表,它會嘗試獲取數據,導致圖表無法使用。這裏是一個http://jsfiddle.net/hcharge/6YSvk/

navigator: {enabled: false}, scrollbar: {enabled: false} 

小提琴理想的情況下我們需要當用戶開始拖動,當他們停止然後再加載數據就知道了。

這甚至有可能嗎?謝謝

回答

1

我認爲這是可能的,但這並不容易。

正如你寫的,你應該開始檢測拖動&下降。使用內置選項是不可能的,但我們可以添加我們自己的事件偵聽器。看看下面的代碼:

new Highcharts.StockChart({ 
    // here comes your chart options, but we can pass callback function as the second parameter 
}, function (chart) { 
    var report = document.getElementById('report'), // just an element to display current extremes 
     xAxis = chart.xAxis[0], 
     startX; 

    function drag(e) { 
     e = chart.tracker.normalizeMouseEvent(e); 
     startX = e.chartX; 
    } 

    function drop(e) { 
     e = chart.tracker.normalizeMouseEvent(e); 

     var delta = e.chartX - startX, 
      extremes = xAxis.getExtremes(), 
      newMin = Math.round(extremes.min - delta), 
      newMax = Math.round(extremes.max - delta); 

     // display extremes retrieved by panning 
     report.innerHTML = "<b>From:</b> " + new Date(newMin) + " <b>to:</b> " + new Date(newMax); 
    } 

    // bind events 
    Highcharts.addEvent(chart.container, 'mousedown', drag); 
    Highcharts.addEvent(chart.container, 'mouseup', drop); 
}); 

只要我們檢測到鼠標按下& mouseUp事件事件,然後計算出差異,翻譯差X數據,最後,從極端的差異。減去。

在這裏你可以找到的代碼的jsfiddle演示上面貼:http://jsfiddle.net/dSEAA/1/

+0

這對於非常有幫助的感謝,我們是不是應該去 – hcharge 2013-02-20 16:04:46

+0

chart.tracker不再Highcharts工作:(有另一種方式來標準化事件? – 2018-01-26 17:22:30