如何使用jQuery UI滑块动态更新highcharts

我正在寻找一种基于jQuery UI滑块确定的值动态更新Highcharts的方法。 我还不熟悉AJAX或JSON，所以我没有太多运气。 我试图让收入在给定月份内逐步增加（例如，订阅服务）。 为了更容易，我把它放在jsFiddle http://jsfiddle.net/nlem33/Sbm2T/3/上 。 任何帮助将不胜感激，谢谢！

$(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] }] }); }); 

Answer 1

我不太了解您希望计算如何工作，但我可以帮助您更新图表。 基本上，您需要创建一个新的数据点aray，然后在相应的图表系列上调用setData。

我试着用你的例子。 计算（ui.value * i）需要更改，但它说明了如何更新图表。 它使用第二个滑块的值来更新第一个系列点：

 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/