Google Charts interpolateNulls无效

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google Charts interpolateNulls无效相关的知识,希望对你有一定的参考价值。

我无法使用interpolateNull选项创建图形。应该是正确的但不能在缺失点之间画线。数据是从php-json收集的。这里是示例和json提供的数据。 html-javascript页面:

    <html>
    <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
            google.charts.load('current', {'packages':['line', 'corechart']});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                    $.ajax({
                            url: 'http://192.168.1.50/fetch_data.php?type=line2',
                            dataType: 'json',
                            success: function (jsonData) {
                                    var chartDiv = document.getElementById('chart_div');
                                    var data = new google.visualization.DataTable(jsonData);
                                    // create formatter
                                    var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.00'});
                                    // format column 1 - Pressure
                                    formatNumber.format(data, 1);
                                    // format column 2 - Temperature
                                    formatNumber.format(data, 2);
                                    var materialOptions = {
                                            chart: {
                                                    title: 'Average Pressure and Temperatures'
                                            },
                                            vAxis: {
                                                    format: '#,##0.00'
                                            },
                                            width: 1200,
                                            height: 600,
                                            interpolateNulls: true,
                                            series: {
                                                    // Gives each series an axis name that matches the Y-axis below.
                                                    0: {axis: 'Pressure'},
                                                    1: {axis: 'Temperature'}
                                            },
                                            axes: {
                                                    // Adds labels to each axis; they don't have to match the axis names.
                                                    y: {
                                                            Temps: {label: 'Pressure'},
                                                            Daylight: {label: 'Temps (Celsius)'}
                                                    }
                                            }
                                    };

                                    function drawMaterialChart() {
                                            var materialChart = new google.charts.Line(chartDiv);
                                            var classicChart = new google.visualization.LineChart(chartDiv);
                                            materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
                                    }
                                    drawMaterialChart();
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                    console.log(errorThrown + ': ' + textStatus);
                            }
                    });
            }
    </script>
    </head>
            <body>
                    <br><br>
                    <div id="chart_div"></div>
            </body>
    </html>

和fetch_data.php页面返回的php-json数据:

{
   "cols":[
      {
         "label":"Date",
         "type":"string"
      },
      {
         "label":"hPa",
         "type":"number"
      },
      {
         "label":"Dallas",
         "type":"number"
      }
   ],
   "rows":[
      {
         "c":[
            {
               "v":"2016-08-27 12:51:00"
            },
            {
               "v":1020.61
            },
            {
               "v":30
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 12:54:00"
            },
            {
               "v":1020.49
            },
            {
               "v":null
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 12:57:00"
            },
            {
               "v":1020.49
            },
            {
               "v":30.4
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:00:00"
            },
            {
               "v":1020.48
            },
            {
               "v":30.7
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:03:00"
            },
            {
               "v":1020.43
            },
            {
               "v":30.6
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:06:00"
            },
            {
               "v":1020.39
            },
            {
               "v":30.5
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:09:00"
            },
            {
               "v":1020.34
            },
            {
               "v":30.9
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:12:00"
            },
            {
               "v":1020.33
            },
            {
               "v":30.5
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:15:00"
            },
            {
               "v":1020.28
            },
            {
               "v":30.8
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:18:00"
            },
            {
               "v":1020.28
            },
            {
               "v":30.8
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:21:00"
            },
            {
               "v":1020.28
            },
            {
               "v":31
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:24:00"
            },
            {
               "v":1020.23
            },
            {
               "v":null
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:27:00"
            },
            {
               "v":1020.24
            },
            {
               "v":30.7
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:30:00"
            },
            {
               "v":1020.2
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:33:00"
            },
            {
               "v":1020.23
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:36:00"
            },
            {
               "v":1020.2
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:39:00"
            },
            {
               "v":1020.14
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:42:00"
            },
            {
               "v":1020.14
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:45:00"
            },
            {
               "v":1020.06
            },
            {
               "v":31
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:48:00"
            },
            {
               "v":1020.06
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:51:00"
            },
            {
               "v":1020.03
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:54:00"
            },
            {
               "v":1019.98
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 13:57:00"
            },
            {
               "v":1019.97
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:00:00"
            },
            {
               "v":1019.9
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:03:00"
            },
            {
               "v":1019.89
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:06:00"
            },
            {
               "v":1019.75
            },
            {
               "v":31.2
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:09:00"
            },
            {
               "v":1019.8
            },
            {
               "v":31.2
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:12:00"
            },
            {
               "v":1019.72
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:15:00"
            },
            {
               "v":1019.64
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:18:00"
            },
            {
               "v":1019.6
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:21:00"
            },
            {
               "v":1019.6
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:24:00"
            },
            {
               "v":1019.55
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:27:00"
            },
            {
               "v":1019.55
            },
            {
               "v":31.4
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:30:00"
            },
            {
               "v":1019.49
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:33:00"
            },
            {
               "v":1019.46
            },
            {
               "v":31.4
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:36:00"
            },
            {
               "v":1019.44
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:39:00"
            },
            {
               "v":1019.36
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:42:00"
            },
            {
               "v":1019.41
            },
            {
               "v":31.1
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:45:00"
            },
            {
               "v":1019.33
            },
            {
               "v":null
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:48:00"
            },
            {
               "v":1019.35
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:51:00"
            },
            {
               "v":1019.34
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:54:00"
            },
            {
               "v":1019.29
            },
            {
               "v":31.4
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 14:57:00"
            },
            {
               "v":1019.22
            },
            {
               "v":31.3
            }
         ]
      },
      {
         "c":[
            {
               "v":"2016-08-27 15:00:00"
            },
            {
               "v":1019.24
            },
            {
               "v":null
            }
         ]
      }
   ]
}

似乎一切正确,但2016-08-27 12:54:00的例子中的数据给我留下了一个漏洞。

有什么建议吗?

答案

interpolateNulls根本不适用于材料图表 google.charts.Line (即使有google.charts.Line.convertOptions

需要使用核心图表 google.visualization.LineChart

您可以在核心图表上使用theme: 'material'选项

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function() {
    var dataTable = new google.visualization.DataTable({
      "cols": [{
        "label": "Date",
        "type": "string"
      }, {
        "label": "hPa",
        "type": "number"
      }, {
        "label": "Dallas",
        "type": "number"
      }],
      "rows": [{
        "c": [{
          "v": "2016-08-27 12:51:00"
        }, {
          "v": 1020.61
        }, {
          "v": 30
        }]
      }, {
        "c": [{
          "v": "2016-08-27 12:54:00"
        }, {
          "v": 1020.49
        }, {
          "v": null
        }]
      }, {
        "c": [{
          "v": "2016-08-27 12:57:00"
        }, {
          "v": 1020.49
        }, {
          "v": 30.4
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:00:00"
        }, {
          "v": 1020.48
        }, {
          "v": 30.7
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:03:00"
        }, {
          "v": 1020.43
        }, {
          "v": 30.6
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:06:00"
        }, {
          "v": 1020.39
        }, {
          "v": 30.5
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:09:00"
        }, {
          "v": 1020.34
        }, {
          "v": 30.9
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:12:00"
        }, {
          "v": 1020.33
        }, {
          "v": 30.5
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:15:00"
        }, {
          "v": 1020.28
        }, {
          "v": 30.8
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:18:00"
        }, {
          "v": 1020.28
        }, {
          "v": 30.8
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:21:00"
        }, {
          "v": 1020.28
        }, {
          "v": 31
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:24:00"
        }, {
          "v": 1020.23
        }, {
          "v": null
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:27:00"
        }, {
          "v": 1020.24
        }, {
          "v": 30.7
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:30:00"
        }, {
          "v": 1020.2
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:33:00"
        }, {
          "v": 1020.23
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:36:00"
        }, {
          "v": 1020.2
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:39:00"
        }, {
          "v": 1020.14
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:42:00"
        }, {
          "v": 1020.14
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:45:00"
        }, {
          "v": 1020.06
        }, {
          "v": 31
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:48:00"
        }, {
          "v": 1020.06
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:51:00"
        }, {
          "v": 1020.03
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:54:00"
        }, {
          "v": 1019.98
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 13:57:00"
        }, {
          "v": 1019.97
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:00:00"
        }, {
          "v": 1019.9
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:03:00"
        }, {
          "v": 1019.89
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:06:00"
        }, {
          "v": 1019.75
        }, {
          "v": 31.2
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:09:00"
        }, {
          "v": 1019.8
        }, {
          "v": 31.2
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:12:00"
        }, {
          "v": 1019.72
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:15:00"
        }, {
          "v": 1019.64
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:18:00"
        }, {
          "v": 1019.6
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:21:00"
        }, {
          "v": 1019.6
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:24:00"
        }, {
          "v": 1019.55
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:27:00"
        }, {
          "v": 1019.55
        }, {
          "v": 31.4
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:30:00"
        }, {
          "v": 1019.49
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:33:00"
        }, {
          "v": 1019.46
        }, {
          "v": 31.4
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:36:00"
        }, {
          "v": 1019.44
        }, {
          "v": 31.3
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:39:00"
        }, {
          "v": 1019.36
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:42:00"
        }, {
          "v": 1019.41
        }, {
          "v": 31.1
        }]
      }, {
        "c": [{
          "v": "2016-08-27 14:45:00"
        }, {
          "v": 1019.33
        }, {
          "v": null

以上是关于Google Charts interpolateNulls无效的主要内容,如果未能解决你的问题,请参考以下文章

Google Charts:在相同的“X”值上绘制多个“Y”值

Google Charts列着色?

Google Charts interpolateNulls无效

Google Charts (GeoChart) - 放大

图表在ng2-google-charts中调整大小

Google Charts Sankey - 节点文本样式