2

jQuery UI スライダーによって決定された値に基づいてハイチャートを動的に更新する方法を探しています。私はまだ 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]
        }]
    });
});
4

1 に答える 1

6

計算がどのように機能するかはよくわかりませんが、チャートを更新する方法についてはお手伝いできます。基本的に、データポイントの新しい配列を作成してから、適切なチャート シリーズで setData を呼び出す必要があります。

私はあなたの例でこれを試しました。計算 (ui.value * i) を変更する必要がありますが、チャートを更新する方法を示しています。2 番目のスライダーの値を使用して、最初の系列ポイントを更新します。

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-12T13:59:25.960 に答える