高腳列表奇怪的分組行爲

我正在使用lazy loading方法加載OHLC數據。在服務器端，我使用Python + MySQL，並且有4個表，其中包含OHLC數據和5分鐘，1小時，1天，1個月的時間間隔。其實它運作良好，但不幸的是，Highcharts以一種奇怪的方式顯示燭臺。尤其是在初始加載時以及在變焦之間切換時。下面是一些例子：高腳列表奇怪的分組行爲

1.圖表初始化

分組在初始加載6h，24h & 3d被禁用，燭臺寬開。

只有然後點擊第一次1w圖表顯示如下，這是正確的，並且還變焦按鈕6h，後24h & 3d現在啓用。

2，分組的rangeSelector按鈕

之間單擊如果我點擊然後All的範圍內選擇時，我得到以下顯示（這是錯誤的）：

只有點擊1m，然後再打開All後，我得到正確顯示：

有人知道發生了什麼事嗎？提前謝謝了！下面是代碼：

<script> 
$(function() { 

    function afterSetExtremes(e) { 

     var chart = Highcharts.charts[0];  

     $.getJSON('http://ipaddress/data3?start=' + Math.round(e.min/1000) + 
       '&end=' + Math.round(e.max/1000), function (data) { 

      chart.series[0].setData(data); 
      chart.hideLoading(); 
     }); 
    } 

    //Initially load the biggest data range 
    $.getJSON('http://ipaddress/data3?start=1481897400&end=1486910100', function (data) { 

     // Add a null value for the end date 
     //data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]); 

     // create the chart 
     Highcharts.stockChart('container', { 
      chart: { 
       type: 'candlestick', 
       zoomType: 'x' 
      }, 

      navigator: { 
       adaptToUpdatedData: false, 
       series: { 
        data: data 
       } 
      }, 

      scrollbar: { 
       liveRedraw: false 
      }, 

      rangeSelector: { 
       buttons: [{ 
        type: 'hour', 
        count: 6, 
        text: '6h', 
        dataGrouping: { 
         forced: false, 
         units: [['minute', [15]]] 
        } 
       }, { 
        type: 'hour', 
        count: 24, 
        text: '24h', 
        dataGrouping: { 
         forced: false, 
         units: [['minute', [30]]] 
        } 
       }, { 
        type: 'day', 
        count: 3, 
        text: '3d', 
        dataGrouping: { 
         forced: false, 
         units: [['hour', [2]]] 
        } 
       }, { 
        type: 'day', 
        count: 7, 
        text: '1w', 
        dataGrouping: { 
         forced: false, 
         units: [['hour', [4]]] 
        } 
       }, { 
        type: 'day', 
        count: 30, 
        text: '1m', 
        dataGrouping: { 
         forced: false, 
         units: [['day', [1]]] 
        } 
       }, { 
        type: 'all', 
        text: 'All' 
       }], 
       inputEnabled: false, 
       selected: 3 // Init loading button 
      }, 

      xAxis: { 
       events: { 
        afterSetExtremes: afterSetExtremes 
       }, 
       //minRange: 3600 * 1000 // one hour 
      }, 

      yAxis: { 
       floor: 0 
      }, 

      series: [{ 
       data: data, 
       dataGrouping: { 
        enabled: true 
       } 
      }] 
     }); 
    }); 
});

來源

2017-02-12 saitam

你可以添加一個例子嗎？很難從圖片中說出，在數據或圖表配置中可能有問題。 – Piittis

@Piittis感謝你的幫助。見上面，我添加了一些代碼 – saitam

儘量不要在navigator.series.data和series.data之間共享相同的引用 - 其餘的配置看起來是正確的。 – morganfree

這裏是溶液：

1.圖表初始化無分組

爲了在初始化階段解決分組問題，使用下列行：

Highcharts.stockChart('container', { 
    //.... your code ... 
}, function(chart){ 
    chart.rangeSelector.clickButton(1); 
    });

這裏的問題是，圖表選項中的選定按鈕在SetExtremes事件之後未觸發r xAxis。

1.無分組點擊rangeSelector

時避免Highcharts的rangeSelector按鈕之間單擊時對數據進行分組，設置圖如下：

rangeSelector: { 
    buttons: [{ 
     dataGrouping: { 
      forced: false } 
      }] }

來源

2017-02-15 17:05:40 saitam

高腳列表奇怪的分組行爲

回答

相關問題