如何使用jQuery UI滑块动态更新highcharts [英] How to dynamically update highcharts using jQuery UI sliders

问题描述

我正在寻找一种方法来根据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：''
}，
字幕：{
 text：''
}，
 xAxis：{
 categories：['1'，'2'，'3'，'4'，'5'，'6'，]，
 tickmarkPlacement ：'on'，
 title：{
 text：'months'
} 
}，
 yAxis：{
 title：{
 text：'$（thousand）'
}，
 labels：{
 formatter：function（）{
 return this.value / 1000; 
} 
 } 
}，
 tooltip：{
 formatter：function（）{
 return''+ 
 this.x +'：'+ Highcharts.numberFormat（this。 y，0，'，'）+'百'; 
} 
}，
 plotOptions：{
 area：{
 stacking：'normal'，
 lineColor：'＃666666'，
 lineWidth：1，
标记：{
 lineWidth：1，
 lineColor：'＃666666'
} 
} 
}，
 legend ：{
 align：'bottom'，
x：275，
 borderColor：null 
}，
 
学分：{
启用：false 
}，
系列：[{
 name：'Revenue'，
 data：[100,130,170,220,350,580] 
}，{ 
 name：'Cost'，
 data：[100,120,140,​​160,180,200] 
}] 
}）; 
}）; 
  

解决方案

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

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

$ p $ 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/

I am looking for a way to dynamically update Highcharts based on the value determined by jQuery UI sliders. I am not well versed yet with AJAX or JSON yet so I haven't had much luck. I am trying to get the revenue to increase incrementally over the given months (like for instance, a subscription service). To make it easier, I have put it on jsFiddle http://jsfiddle.net/nlem33/Sbm2T/3/ . Any help would be much appreciated, thanks!

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

解决方案

I don't quite upderstand how you want your calculation to work, but I can help with how to update the chart. Basically, you need to create a new aray of datapoints, and then call setData on the appropriate chart series.

I tried this on your example. The calcuation (ui.value * i) needs to be changed, but it ilustrates how to update the chart. It uses the valueof the second slider to update the first series points:

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/

这篇关于如何使用jQuery UI滑块动态更新highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！