8

AJAXを介して動的に更新したいフロットチャートがあります。

最初にグラフをレンダリングできますが、dataSetを更新してグラフを再描画しようとすると、すべてのデータポイントがリセットされます。

plot.setData(dataSet);
        plot.draw();

いくつかの異なるアレイ設定でこれを試しましたが、正しいデータを渡しているようです。グラフではうまくいきません。

誰かアイデアはありますか？ありがとう！

http://datasift.islsandbox.com/

この例ではWebSocketを使用しているため、WebKitブラウザーがテストに最適です。

4

3 に答える 3

12

あなたのコードには、flot のセットアップに関する 2 つのことがあります。ロード時に、次のようにします。

var plot = $.plot($("#flotchart"), [{
    data: [[35, 0]],
    bars: {show: true, horizontal: true}
}]);

その後、AJAX 経由で新しいデータを取得し、次のようにします。

 var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData(dataSet);
 plot.draw();

欠けているのは、最初の呼び出しでは各シリーズがオブジェクトであるデータ形式を使用しているがsetData、2 回目の呼び出しでは「配列としてのシリーズ」バリエーションを使用していることです。どこにあるのか正確にはわかりませんが、それは浮き沈みを台無しにしています。2 回目の呼び出しで修正する方法は次のとおりです。

 var dataSet = [[pacCount, 0]];//pacCount is a number that increments each call
 plot.setData([{
    data:dataSet,
    bars: {show: true, horizontal: true}
 }]);
 plot.draw();
于 2011-04-25T20:02:59.653 に答える
2

ラベル付きの複数のシリーズが必要な場合：

plot.setData([
  {
    label: 'Hola',
    data: data[0],
  },
  {
    label: 'Hola2',
    data: data[1]
  }
]);                 
plot.setupGrid();
plot.draw();

json形式のajax呼び出しからデータを取得できる場所。

たとえば、phpでは：

<?php

$data[] = array(2,4);
$data[] = array(12,6);
$data[] = array(22,8);
$data[] = array(32,2);
$data1[] = array(4,6);
$data1[] = array(14,3);
$data1[] = array(24,9);
$data1[] = array(34,5);

$response[0] = $data;
$response[1] = $data1;

echo json_encode($response);
?>

いずれの場合も、サーバー側からの戻り形式の値は、上記の例のような2つのシリーズでは次のようになります。

[[[2,4]、[12,6]、[22,8]、[32,2]]、[[4,6]、[14,3]、[24,9]、[34,5 ]]]

于 2011-09-23T10:15:20.300 に答える