Question

我正在尝试在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或空 - 到目前为止没有运气。

Answer 1

您可以动态自动计算间隔值，唯一的缺点是这些值将在图表上显示为点。在定义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的工作原理。

Answer 2

我遇到了完全相同的问题并将其修复如下：

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

是否猜测缺失点的值。如果为true，它将根据相邻点猜测任何缺失数据的值。如果为false，则会在未知点处的线路中断。

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

将其设置为true

具有不同采样间隔的Google Line Chart

2 个答案: