hightcharts範圍選擇器的Onclick事件

在這裏我有一個像highcharts像1d，1w，1m，3m，6m，所有範圍選擇器的要求，當我點擊任何範圍選擇器我必須得到響應數據這意味着ajax調用onclick範圍選擇器的服務器。我有下面的小提琴文件有我的代碼。像我通過使用hightcharts範圍選擇器的Onclick事件

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

    if(data != null) { 
     chart.addSeries({ 
      name : 'Energy consumption', 
      id : 'energyConsumption', 
      data : data 
     },{ 
      name : 'Outdoor Temperature', 
      id : 'outdoorData', 
      data : data 
     } 
     );  
    } 

});

上述代碼工作如果我改變的數據爲靜態或從其不工作JQuery的回調響應添加數據，其具有的問題。我的小提琴文件低於 http://jsfiddle.net/UegzK/4/

請幫我在推動這一感謝，

來源

2013-05-22 Mahidhar

兩個變化：

reset_all_buttons應該是這樣：

function reset_all_buttons() { 
    $.each(chart.rangeSelector.buttons, function(index, value) { 
     console.debug("index value is "+index); 
     console.debug("value value is : "+ value); 
     value.setState(0); 
    }); 

    series = chart.get('energyConsumption'); 
    series.remove(); 
    series = chart.get('outdoorData'); 
    series.remove(); 
}

因爲你不想刪除10噸imes只有一個系列（從你的例子）。

addSeries可以在每次只添加一個系列，你應該設置pointStart和pointInterval作爲首發系列：

if(data.length > 0) { 
    console.log(chart,data); 
    chart.addSeries({ 
     name : 'Energy consumption', 
     id : 'energyConsumption', 
     pointStart: Date.UTC(2013, 03, 08,00,00), 
     pointInterval: 1 * 3600 * 1000, 
     data : [26.5, 23.3, 18.3, 13.9, 9.6,21.5, 25.2,49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6] 
    }); 

    chart.addSeries({ 
     name : 'Outdoor Temperature', 
     id : 'outdoorData', 
     pointStart: Date.UTC(2013, 03, 08,00,00), 
     pointInterval: 1 * 3600 * 1000, 
     data : [26.5, 23.3, 18.3, 13.9, 9.6,21.5, 25.2] 
    });  
}

和舉例您：http://jsfiddle.net/UegzK/5/（僅適用於1W，只是以顯示這應該如何）。

來源

2013-05-23 13:59:16

而不是你的reset_all_buttons函數，調用chart.rangeSelector.clickButton（index）將應用highstock的默認行爲。我有一個使用案例，我可以在每日和每日股票價格之間切換。當我切換到3天視圖時，我希望使用等距數據點的更細粒度的日內價格。在較遠距離的視圖中，我想要一個帶有序數的xAxis：true，所以這些點是基於時間的。這裏是我的加載事件（打字稿）

chart: { 
    events: { 
     load: function() { 
      var chart: HighchartsChartObject = <HighchartsChartObject>this; 
      var replaceSeries = (serieses: HighchartsSeriesOptions[]): void => { 
       while(chart.series.length > 0) { 
        chart.series[0].remove(false); 
       } 
       _.each(serieses, (series: HighchartsSeriesOptions) => { 
        chart.addSeries(series, false); 
       }); 
       chart.redraw(); 
      } 
      var buttons = chart.rangeSelector.buttons; 
      buttons[0].on("click", function(e) { 
       if (chart.rangeSelector.selected !== 0) { 
        _.each(this.xAxis, (xAxis: any): void => { 
         xAxis.options.ordinal = false; 
         xAxis.options.minRange = undefined; 
        }); 
        replaceSeries(chartDataService.buildDataSeries(true)); 
       } 
       chart.rangeSelector.clickButton(0); 
      }); 
      _.each(buttons, (button, index: number): void => { 
       if (index !== 0) { 
        button.on("click", function(e) { 
         if (chart.rangeSelector.selected === 0) { 
          _.each(this.xAxis, (xAxis: any): void => { 
           xAxis.options.ordinal = true; 
           xAxis.options.minRange = 1000 * 60 * 60 * 24 * 7; // 1wk for daily data 
          }); 
          replaceSeries(chartDataService.buildDataSeries(false)); 
         } 
         chart.rangeSelector.clickButton(index); 
        }); 
       } 
      }) 
     } 
    } 
}

來源

2014-10-03 21:27:31 Steve

hightcharts範圍選擇器的Onclick事件

回答

相關問題