如何使用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] 
     }] 
    }); 
});

你怎么想图表改变，当你移动滑块？即如果“每月单位数”幻灯片设置为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/

这有助于很多，我可以照顾的计算。非常感谢！我会购买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

相关推荐