0

我正在尝试在折线图上绘制多条线，但每条线都有不同的数据采样间隔 - 有些每 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

我遇到了完全相同的问题并像这样修复了它：

使用interpolateNullsLineChart 页面中记录的选项：http ://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Configuration_Options

是否猜测缺失点的值。如果为真，它将根据相邻点猜测任何缺失数据的值。如果为假，它将在未知点处留下断线。

该选项默认为 False，使用var options = {'interpolateNulls':true};

于 2013-05-06T15:08:38.260 回答
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;
    }
}

这将遍历每一行，检查值是否已定义。如果没有，它将找到下一个点和上一个点之间的中间点并将其设为值。这是它的工作原理。

于 2012-07-10T09:26:59.850 回答