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

Posted 2023-03-13

【中文标题】如何使用 jQuery UI 滑块动态更新 highcharts

【英文标题】：How to dynamically update highcharts using jQuery UI sliders

【发布时间】：2013-03-12 11:44:47

【问题描述】：

我正在寻找一种基于 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]
        ]
    );
);

【问题讨论】：

当您移动滑块时，您希望图表如何变化？即如果每月单位幻灯片设置为 25，图表将绘制什么？

只想说，感谢您发布代码和 JSFiddle！大多数新用户不知道这样做。但正如史蒂夫所问的，我们需要更多关于滑块会改变什么的信息。

假设价格为 100 美元/月，每月售出 5 台。每个月的数据点将通过前几个月的总和加上（单位*价格）来计算，单位数量将每月增加 5 个。例如第 1 个月：(100*5) = 500 第 2 个月：500 + (100*10) = 1500 第 3 个月：1500 + (100*15) = 3000 第 4 个月：3000 + (100*20) = 5000 等等。 ..

【参考方案1】：

我不太了解您希望您的计算如何工作，但我可以帮助您更新图表。基本上，您需要创建一个新的数据点数组，然后在相应的图表系列上调用 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/

【讨论】：

这很有帮助，我可以负责计算。非常感谢！我将购买 Highcharts 的开发者许可证 :)

我还有一个问题。如何使单位/月滑块也更新图表？所以基本上绘制的点是通过两个滑块值相乘来计算的。

我会在滑动函数中设置全局变量，例如slider1Val=ui.value。然后，您可以在计算中使用 slider1Val 和 slider2Val。