2

シリーズの各ポイントに名前を付けているハイチャート散布図にシリーズを追加したいと思います。次の方法でグラフを作成します。

var chart; // globally available

makeCharts = function(){

      chart = new Highcharts.Chart({
         chart: {
            renderTo: 'container1',
            type: 'scatter'
         },        
         series: [{
            name: 'a',
                data: [{                    
                    'id': 'point1',
                    'x': 1,
                    'y': 2
                }, {
                    'id': 'point2',
                    'x': 2,
                    'y': 5
                }]
            }]

      });
}

次のようなものを使用して、チャート上のポイントを更新できるようにしたいと思います。

chart.series[0].setData([{id:['point3', 'point4', 'point5'], y:[0,1,2], x:[1,2,3]}])

しかし、これは正しくありません。各ポイントにIDがあるこのアプローチを使用して、チャートを更新することは可能ですか？

編集：

明確にするために、を使用してデータを1つずつ追加するのではなく、配列を直接渡すことができるようにしたいと思いますaddPoint()。配列をループして、次のaddPoint()ようなことを行うことができます。

id:['point3', 'point4', 'point5'];
y:[0,1,2];
x:[1,2,3];

for (i=0; i<x.length; i++)
  {
  chart.series[0].addPoint({
    x:  x[[i],
    y:  y[i],
    id: id[i]
});

  }

ただし、これは非常に遅いです。次のアプローチを使用すると、データを追加する方がはるかに高速です。

chart.series[0].setData([[1,0],[2,1],[3,2]]);

次のようなデータを追加できることがわかりました。

 chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);

idしかし、ポイントが選択されたときにアクセスできる唯一の方法は、を介することthis.point.config[2]です。次のアプローチでは、chart.get('pointID')を設定しなかったため、ポイントを特定するために使用できませんID。だけでポイントを特定できるようにしたいと思いますID。

4

3 に答える 3

4

大まかに言えば、グラフデータを動的に変更する方法は2つあります。

  1. Series.setData（）既存のデータを新しいデータに完全に置き換える場合は、このアプローチを使用します
  2. Series.addPoint（）ポイントのサブセットを動的に追加する場合は、このアプローチを使用します。このメソッドは、一度に1つのポイントを追加するためだけのものではありません。ドキュメントをもう一度注意深く読むと、このメソッドはブール再描画引数を取り、引数の詳細は次のようになります。

redraw：ブール
デフォルトはtrueです。ポイントが追加された後にチャートを再描画するかどうか。複数のポイントを追加する場合は、再描画オプションをfalseに設定することを強くお勧めします。代わりに、ポイントの追加が終了した後に、chart.redraw（）を明示的に呼び出します。

あなたの場合、いくつかのポイントを動的に追加したいが、既存のポイントを保持したいので、アプローチ2を使用する必要があります。ただし、再描画をfalseに設定して、ループ内で使用する必要があります（したがって、遅い）そしてループの後、redrawメソッドを明示的に呼び出す

コード

var id = ['point3', 'point4', 'point5'],
    y = [0, 1, 2],
    x = [1, 2, 3];

for (var i = 0; i < x.length; i++) {
    chart.series[0].addPoint({
        x: x[i],
        y: y[i],
        id: id[i]
    },false);
}
chart.redraw();

複数のポイントを動的に追加する| HighchartsとHighstock@jsFiddle

于 2012-10-07T19:04:54.007 に答える
1

series.addPointを使用してみてください。

chart.series[0].addPoint({
    x:  0,
    y:  0,
    id: 'anything'
});

ただし、シリーズのデータ​​を設定する必要がある場合は、

chart.series[0].setData([{
    x:  0,
    y:  0,
    id: 'anything'
},{
    x:  2,
    y:  2,
    id: 'another'
}]);
于 2012-10-05T07:03:30.157 に答える
1

次のようにデータを渡すことができるとすぐに：

chart.series[0].setData([[1,0, 'point3'],[2,1, 'point4'],[3,2, 'point5']]);

（あなたが質問で述べたように）、私はあなたに少しハックを使うことを提案することができます。

applyOptionsHighcharts.Pointプロトタイプのメソッドに別のステートメントを追加する必要があります。

if (typeof options[0] === 'number' && options[2] && typeof options[2] === 'string') this.id = options[2];

ここでは、実際の動作を確認できます。

于 2012-10-07T17:49:08.767 に答える