javascript - javascriptで動的に配列にアイテムを追加する方法

Question

まず第一に、私はJavaScriptの初心者なので、ご容赦ください。Highchart フレームワークを使用して円グラフを描画する次のスクリプトがあります。

$(function() {
    var options = {
        colors: ["#66CC00", "#FF0000", "#FF6600"],
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: true
        },
        title: {
            text: 'Host Status'
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.total;
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'service status',
            data: []
        }]
    }

    var chart;
    options.series.data.push('['
    Service Ok ',   45.0]')
    $(document).ready(function() {
        chart = new Highcharts.Chart(options)
    });

});

私がやろうとしているのは、値をseries.dataオブジェクトの配列として配列に動的にロードすることです。ここで何が間違っていますか?データをデータ配列にロードするより良い方法はありますか?

score 5 · Accepted Answer

seriesプロパティは配列であるため、次のように記述する必要があります（シリーズに単一のデータポイントを追加するには）。

options.series[0].data.push( ["Service Ok", 45.0 ]);

私はこのJSフィドルを見ていました。

score 4 · Accepted Answer

コードにエラーがあります
。値を動的にロードしたいと言っていましたよね？
ただし、コードは最初のシリーズデータを設定してレンダリングするだけです。
したがって、あなたの場合、セリエデータを「動的に」変更したい場合は、現在のチャートを破棄し、データを更新してから再度レンダリングする必要があります。おそらくパフォーマンスが低下します。

これを行う正しい方法は、highstock API を使用することであり、手動で更新しないでください。これを行うと、チャートのズームを使用するときにエラーが発生する可能性があります。これは、チャートのポイントを更新するために、この API がポイントを再度計算する必要があり、上記の関数を使用したときに作成されるためです。シリーズリファレンス
でわかるようにチャートデータを更新するには、次の関数を使用する必要があります。
新しいデータを設定する:chart.series[0].setData(newData, redraw); 例
新しいポイントを追加する:chart.series[0].addPoint(arrayOfPoints, redraw); 例

このフィドルを見てください。ここで、API関数を使用せずにチャートシリーズを手動で更新するとどうなりますか? 何もない。

最高のパフォーマンスを得るには、次のコードを使用できます。

    function createChart() {
        chart = new Highcharts.Chart(options);
    }

    // when you want to update it's data
    $(element).yourEvent(function() {
        var newData = ['Service Ok', 50.0];
        if(chart.hasRendered) {
            chart.series[0].setData(newData, true);
        } else {
            // only use it if your chart isn't rendered
            options.series[0].data.push(newData);
            createChart();
        }
    });

$(function() {
    var options = {
        colors: ["#66CC00", "#FF0000", "#FF6600"],
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: true
        },
        title: {
            text: 'Host Status'
        },
        tooltip: {
            formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.total;
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'service status',
            data: ['Service Ok ',   45.0]
        }]
    }

    var chart;
    $(document).ready(function() {
        createChart();
    });
});

score 1 · Accepted Answer

JavaScriptのpush（）メソッドの仕様に役立つと思います

および Highcharts制御仕様

Seriesはオブジェクトの配列であるため、次のようにする必要があります。

options.series[0].data.push(["Service Ok", 45.0 ])

この場合、あなたは得るでしょう

series: [{

    type: 'pie',

    name: 'service status',

    data: [
             ["Service Ok", 45.0 ]
          ]

    }]

円グラフ付きのデモ

score 0 · Accepted Answer

これを試して

$(function() {
var options = {   
    series: [{
        type: 'pie',
        name: 'service status',
        data: []
        }]
};    
    var objData={ "type":'bar','name':'second','data':[]};
    options.series.push(objData);
});

score 0 · Accepted Answer

0

試す

options.series[0]data[0]= 'Service Ok';
options.series[0]data[1]= 45.0;

于 2012-05-17T08:39:08.573 に答える

javascript - javascriptで動的に配列にアイテムを追加する方法

5 に答える 5

Related

Reference