1

ユーザーが手動で処理できるスライダーに基づいてバーの高さを変更しようとしています。

http://jsfiddle.net/h0ow9kLk/2/ 例のコード:

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <form oninput="output1.value=slider1.value">
        <input type="range" name="slider1" id="slider1" min="17" max="25"/>
        <output name="output1" for="slider1"></output>
    </form>
    <form oninput="output2.value=slider2.value" >
        <input type="range" name="slider2" id="slider2"  min="5000" max="5000" step="5"/>
        <output name="output2" for="slider2"></output>
    </form>
<button id="updater">Update</button>

Javascript

$(function () {
  $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Resistance', 'FuelConsumed', 'FuelCost', 'Grapes', 'Bananas']
        },

        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: 'Ship 1',
            data: [5, 3, 4, 7, 2],
            stack: 'Ship 1'
        }, 
                 {
            name: 'Ship 2',
            data: [3, 0, 4, 4, 3],
            stack: 'Ship 2'
        }]

    });
    var $slider = $("#updater");

                    $slider.bind('click', function(e) {
                    e.preventDefault();

                var speed = $("#slider1").val();
                var weight = $("#slider2").val();
                var fuel;

                       if(weight == 5000){

                       if     (speed == 17){fuel = 41; }
                       else if(speed == 18){fuel = 51; }
                       else if(speed == 19){fuel = 60; }
                       else if(speed == 20){fuel = 75; }
                       else if(speed == 21){fuel = 80; }
                       else if(speed == 22){fuel = 100; }
                       else if(speed == 23){fuel = 120; }
                       else if(speed == 24){fuel = 138; }
                       else if(speed == 25){fuel = 153; }

                       }
                       else{ fuel = 0;} 
                        chartColumn.series[0].data[0].value[0].update(parseInt(fuel));
                    nv.utils.windowResize(chart.update);     
                });
});

したがって、更新コード: chartColumn.series[0].data[0].value[0].update(parseInt(fuel));

一番下は、最初のバーを更新しようとするために使用されます。ただし、パスが間違っていると思いますが、バーの高さが変化していません。

私がやろうとしていることの例は、これ http://jsfiddle.net/ZmnWq/74/です

正しいパスを使用してデータに到達する方法を学ぶことができる場所はありますか?可能であれば、データ値を変更する方法を誰かに教えてもらえますか?

この質問は非常に基本的に聞こえますが、私はこれに本当に慣れていません。すべての助けに感謝します！

ありがとうございました！

4

1 に答える 1

1

あなたの例では、values[0]を削除するだけでうまくいきます。後でそのチャートオブジェクトに基づいて値を変更できるように、ハイチャートをいくつかのオブジェクト(例のchartColumn内)に割り当てる必要があります。あなたの場合、それは未定義です。

シリーズに新しいポイントを追加するには、以下のコードを使用できます。詳細はこちらをご覧ください。

chartColumn.series[0].addPoint([x, 5], false, true);

新しいシリーズ全体を追加するには、以下のコードを追加できます。

chartColumn.addSeries({
    name: "ship 3",
    data: [4,5,6,7,8]
}, false);

chartColumn.redraw();

シリーズ全体を新しい値で変更するには、チャートを自動的に再描画する setData を使用できます。

chartColumn.series[0].setData(data,true);

あなたの例の作業フィドルはここにあります。

軸の更新の詳細については、以下のドキュメントに従ってください。

http://api.highcharts.com/highcharts#Axis.update

于 2015-11-18T05:13:20.630 に答える