0

line-chartに複数の線を描画しようとしていますが、各線のデータ サンプリング間隔は異なります (4 時間ごと、8 時間ごとなど)。

間隔をマージすると、データは次のようになります。

Interval, Avg-8h, Avg-4h
0       ,   0.45, 0.33
4       ,       , 0.21
8       ,   0.32, 0.55
12      ,       , 0.65

現時点では、Avg-4h ラインが表示されるのが最善ですが、「ギャップ」があるため、Avg-8h ラインは単なるポイントです。

これの最小限の例 (大量の HTML で申し訳ありません):

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
     var data;
     var chart;
      google.load('visualization', '1', {'packages':['corechart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = {
            "cols": [
                { "label": "Interval", "type": "number" },
                { "label": "Avg-8h", "type": "number" },
                { "label": "Avg-4h", "type": "number" }],
            "rows": [
                { "c": [{ "v": 24 }, { "v": 0.2275 }, { "v": 0.1527 }] },
                { "c": [{ "v": 20 }, { }, { "v": 0.0664 }] },
                { "c": [{ "v": 16 }, { "v": 0.0624 }, { "v": 0.0495 }] },
                { "c": [{ "v": 12 }, { }, { "v": 0.0555 }] },
                { "c": [{ "v": 8 }, { "v": 0.109 }, { "v": 0.1112 }] },
                { "c": [{ "v": 4 }, { }, { "v": 0.1403 }] },
                { "c": [{ "v": 0 }, { "v": 0.1403 }, { }] }
            ]
        };

        var table = new google.visualization.DataTable(data);

        var options = {
            legend: 'none',
            pointSize: 5
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(table, options);
    }

    </script>
  </head>
  <body>
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

偽/ダミーの値を挿入する以外に (これはやりたくない - これは実際のデータを誤って伝えます)、これを行う方法はありますか?

空の値を null または空に設定しようとしましたが、これまでのところ運がありません。

4

2 に答える 2

0

その場で間隔値を自動的に計算します。唯一の欠点は、これらの値がグラフ上に点として表示されることです。を定義した後、次を実行する必要がありますdata。

for(var i = 0; i < data.rows.length; i++) {
    if(data.rows[i].c[1].v == undefined) {
        data.rows[i].c[1].v = (data.rows[i - 1].c[1].v + data.rows[i + 1].c[1].v) / 2;
    }
}

これは各行をループし、値が定義されているかどうかを確認します。そうでない場合は、次の点と前の点の間の中間点を見つけて、その値にします。これが動作するjsfiddleです。

于 2012-07-10T09:26:59.850 に答える
0

私はまったく同じ問題を抱えていて、次のように修正しました：

interpolateNullsLineChart ページに記載されているオプションを使用します: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Configuration_Options

欠損値の値を推測するかどうか。true の場合、隣接するポイントに基づいて欠落データの値を推測します。false の場合、未知のポイントでラインに切れ目が残ります。

オプションのデフォルトは False で、次を使用して true に設定します。var options = {'interpolateNulls':true};

于 2013-05-06T15:08:38.260 に答える