如何使用jQuery UI滑塊動態更新highcharts

我正在尋找一種方法來動態更新基於由jQuery UI滑塊確定的值的Highcharts。我還不熟悉AJAX或JSON，所以我沒有多少運氣。我試圖讓收入在給定的月份內逐步增加（例如訂閱服務）。爲了更容易，我把它放在jsFiddle http://jsfiddle.net/nlem33/Sbm2T/3/。任何幫助將不勝感激，謝謝！如何使用jQuery UI滑塊動態更新highcharts

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      backgroundColor: null, 
      type: 'area' 
     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      categories: ['1', '2', '3', '4', '5', '6',], 
      tickmarkPlacement: 'on', 
      title: { 
       text: 'months' 
      } 
     }, 
     yAxis: { 
      title: { 
       text: '$(thousands)' 
      }, 
      labels: { 
       formatter: function() { 
        return this.value/1000; 
       } 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return ''+ 
        this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' hundred'; 
      } 
     }, 
     plotOptions: { 
      area: { 
       stacking: 'normal', 
       lineColor: '#666666', 
       lineWidth: 1, 
       marker: { 
        lineWidth: 1, 
        lineColor: '#666666' 
       } 
      } 
     }, 
     legend:{ 
      align: 'bottom', 
      x: 275, 
      borderColor: null 
     }, 

     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Revenue', 
      data: [100, 130, 170, 220, 350, 580] 
     }, { 
      name: 'Cost', 
      data: [100, 120, 140, 160, 180, 200] 
     }] 
    }); 
});

來源

2013-03-12 user2160685

你怎麼想圖表改變，當你移動滑塊？即如果「每月單位數」幻燈片設置爲25，那麼圖表會繪製什麼？ – SteveP 2013-03-12 12:03:04

只想說，感謝您發佈代碼和JSFiddle！大多數新用戶不知道這樣做。但正如史蒂夫所問，我們需要更多關於滑塊會發生什麼變化的信息。 – MatthewKremer 2013-03-12 12:20:51

假設價格爲每月100美元，每月銷售5個單位。每個月的數據點將按前幾個月的總和加上（單位*價格）計算，單位數量每個月增加5個單位。例如第1月：（100 * 5）= 500第2月：500 +（100 * 10）= 1500第3月：1500 +（100 * 15）= 3000第4月：3000 +（100 * 20）= 5000等.. – user2160685 2013-03-12 13:18:23

我不太瞭解你想如何計算工作，但我可以幫助如何更新圖表。基本上，您需要創建一個新的數據點，然後在適當的圖表系列上調用setData。

我試過你的例子。計算（ui.value * i）需要更改，但它會說明如何更新圖表。它使用的valueOf第二滑塊來更新第一系列幾點：

slide: function(event, ui) { 
    $('#slider2_value').html('$' + ui.value); 
    var newdata = []; 
    for (var i=0 ; i<6 ; i++) { 
     newdata.push(ui.value * i); 
    } 
    chart.series[0].setData (newdata); 
},

http://jsfiddle.net/BLKQf/

來源

2013-03-12 13:59:25 SteveP

這有助於很多，我可以照顧的計算。非常感謝！我會購買Highcharts的開發者許可:) – user2160685 2013-03-12 14:51:35

雖然我還有一個問題。我怎樣才能使單位/月份滑塊也更新圖表？所以基本上繪製的點是通過兩個滑塊值相乘來計算的。 – user2160685 2013-03-12 15:06:39

我會在slide1Val = ui.value這樣的幻燈片函數中設置全局變量。然後您可以在計算中使用slider1Val和slider2Val。 – SteveP 2013-03-12 15:16:07

如何使用jQuery UI滑塊動態更新highcharts

回答

相關問題