web-dev-qa-db-ja.com

ハイチャート-redraw（）と新しいHighcharts.chart

ハイチャートを更新する正しい方法を理解するのに苦労しています。チャートをレンダリングした後、何らかの方法でそれを更新したいとします。たとえば、データ系列の値を変更したり、dataLabelsを有効にしたりできます。

現時点では、これを行う方法を理解できる唯一の方法は、チャートオプションを変更し、new Highcharts.chartを使用してハイチャートに再描画を指示することです。

しかし、これはやり過ぎかもしれませんし、new Highcharts.chartでゼロから始めなくても、「in situ」でチャートを変更できるかもしれません。 redraw()メソッドがあることに気づきましたが、動作させることができないようです。

どんな助けも大歓迎です。

おかげで、

ロビン

サンプルコードは次のとおりで、下部にjsFiddleがあります

$(document).ready(function() {

chartOptions = {
    chart: {
        renderTo: 'container',
        type: 'area',
    },
    series: [{
        data: [1,2,3]
    }]
};

chart1 = new Highcharts.Chart(chartOptions);


chartOptions.series[0].data= [10,5,2];
chart1 = new Highcharts.Chart(chartOptions);

//The following seems to have no effect
chart1.series[0].data = [2,4,4];
chart1.redraw();

});​

http://jsfiddle.net/sUXsu/18/

[編集]：

この質問の将来の視聴者にとって、dataLabelsを非表示および表示する方法はないことに注意する価値があります。以下にその方法を示します。 http://jsfiddle.net/supertrue/tCF8Y/

javascripthighcharts
75
RobinL

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

setDataメソッド自体がredrawメソッドを呼び出します

78
karthik - LK

再描画を呼び出す前に、チャートオブジェクトでsetおよびadd関数を呼び出す必要があります。

chart.xAxis[0].setCategories([2,4,5,6,7], false);

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

chart.redraw();
13
waqas
var newData = [1,2,3,4,5,6,7];
var chart = $('#chartjs').highcharts();
chart.series[0].setData(newData, true);

説明：
変数newDataには、チャートでupdateする値が含まれます。変数chartは、チャートのオブジェクトです。 setDataは、データを更新するためにhighchartによって提供されるメソッドです。

メソッドsetDataには2つのパラメーターが含まれています。最初のパラメーターでは新しい値を配列として渡す必要があり、2番目のパラメーターはブール値です。 trueの場合はチャート自体が更新され、falseの場合はredraw()メソッドを使用してチャートを更新する必要があります（つまりchart.redraw();）

http://jsfiddle.net/NxEnH/8/

9
Sandip

前のコメントで述べた@RobinLでは、chart.series [n] .setData（）を使用できます。まず、チャートインスタンスをチャート変数に割り当てたことを確認する必要があります。これにより、チャートへのアクセスと操作に必要なすべてのプロパティとメソッドが採用されます。

また、グラフの自動レンダリングを防ぐために、setData（）の2番目のパラメーターを使用し、falseにしました。これは、複数のデータシリーズがあるため、render = falseでそれぞれを更新し、chart.redraw（）を実行するためです。これによりパフォーマンスが向上しました（10,000〜100,000のデータポイントがあり、50ミリ秒ごとにデータセットを更新しています）。

0
lauri108