javascript - 通过单击图例隐藏线谷歌图表，图例不是灰色的，当所有线都隐藏时会遇到麻烦

Question

前一段时间我在这里问我如何在点击图例时隐藏谷歌图表中的线条。现在我找到了一个解决方案，我可以如何做到这一点，你可以在 JSFIDDLE 上看到它的工作。但是有些小事情不起作用，例如:

• 当我点击图例时，我点击的行是隐藏的，这很好，但图例中的样本不是灰色的，我不明白为什么，因为它必须是灰色的
• 当我隐藏所有线条并且我想再次显示这些线条时，它们只显示在 chartrangefilter 上，就像您在 JSFIDDLE 中看到的那样示例所以我希望不可能隐藏至少显示一行的所有行，否则当有人试图隐藏最后一行时会在弹出框中发出警告。

有人可以帮助我吗？

这是我用来通过点击隐藏行的代码

google.visualization.events.addListener(chart, 'select', function () {
var sel = chart.getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
            // if row is undefined, we clicked on the legend
            if (sel[0].row === null) {
                var col = sel[0].column;
                if (columns[col] == col) {
                    // hide the data series
                    columns[col] = {
                        label: data.getColumnLabel(col),
                        type: data.getColumnType(col),
                        calc: function () {
                            return null;
                        }
                    };

                    // grey out the legend entry
                    series[col - 1].color = '#CCCCCC';
                }
                else {
                    // show the data series
                    columns[col] = col;
                    series[col - 1].color = null;
                }
                var view = new google.visualization.DataView(data);
                view.setColumns(columns);
                chart.draw(view, options);
            }
        }
    });

Answer 1

虽然 series 对象正在正确构建，
它永远不会在图表上更新

重新绘制前需要设置选项

chart.setOption('系列', 系列);

---

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['corechart', 'controls','line']
});

function drawVisualization() {
  var dashboard = new google.visualization.Dashboard(
     document.getElementById('dashboard'));

  var control = new google.visualization.ControlWrapper({
   'controlType': 'ChartRangeFilter',
   'containerId': 'control',
   'options': {
     // Filter by the date axis.
     'filterColumnIndex': 0,
     'ui': {
     'chartType': 'LineChart',
     'chartOptions': {
       'chartArea': {'width': '80%'},
       'hAxis': {'baselineColor': 'none', format: "HH:mm" }
       ,'vAxis': {minValue: 0}
     }
     }
   },
   });
     var data = new google.visualization.DataTable({"cols":[{"label":"Date","type":"datetime"},{"label":"RPI1","type":"number"},{"label":"RPI2","type":"number"},{"label":"RPI3","type":"number"},{"label":"RPI4","type":"number"},{"label":"RPI5","type":"number"},{"label":"RPI6","type":"number"},{"label":"RPI7","type":"number"},{"label":"RPI8","type":"number"}],"rows":[{"c":[{"v":"Date(2017, 0, 11, 12, 51, 40)"},{"v":23},{"v":22},{"v":23},{"v":23},{"v":21},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 51, 50)"},{"v":22},{"v":22},{"v":21},{"v":21},{"v":21},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 1)"},{"v":21},{"v":22},{"v":20},{"v":22},{"v":23},{"v":21},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 11)"},{"v":23},{"v":21},{"v":22},{"v":22},{"v":20},{"v":20},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 22)"},{"v":23},{"v":22},{"v":20},{"v":22},{"v":23},{"v":20},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 32)"},{"v":20},{"v":20},{"v":21},{"v":22},{"v":22},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 42)"},{"v":20},{"v":21},{"v":20},{"v":23},{"v":20},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 52, 53)"},{"v":23},{"v":20},{"v":21},{"v":22},{"v":21},{"v":20},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 3)"},{"v":23},{"v":22},{"v":23},{"v":21},{"v":20},{"v":22},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 13)"},{"v":23},{"v":22},{"v":23},{"v":23},{"v":20},{"v":21},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 24)"},{"v":22},{"v":20},{"v":20},{"v":21},{"v":22},{"v":23},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 34)"},{"v":22},{"v":21},{"v":22},{"v":21},{"v":23},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 44)"},{"v":23},{"v":22},{"v":23},{"v":23},{"v":21},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 53, 55)"},{"v":20},{"v":21},{"v":23},{"v":23},{"v":22},{"v":21},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 5)"},{"v":22},{"v":20},{"v":23},{"v":20},{"v":20},{"v":20},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 15)"},{"v":22},{"v":20},{"v":21},{"v":23},{"v":20},{"v":23},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 26)"},{"v":21},{"v":22},{"v":22},{"v":21},{"v":21},{"v":20},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 36)"},{"v":22},{"v":21},{"v":20},{"v":22},{"v":23},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 46)"},{"v":21},{"v":22},{"v":21},{"v":22},{"v":21},{"v":20},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 54, 57)"},{"v":20},{"v":23},{"v":21},{"v":20},{"v":23},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 7)"},{"v":23},{"v":20},{"v":21},{"v":20},{"v":22},{"v":20},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 17)"},{"v":22},{"v":23},{"v":23},{"v":21},{"v":20},{"v":20},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 28)"},{"v":21},{"v":21},{"v":23},{"v":23},{"v":23},{"v":21},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 38)"},{"v":23},{"v":22},{"v":20},{"v":23},{"v":22},{"v":23},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 48)"},{"v":23},{"v":21},{"v":21},{"v":23},{"v":23},{"v":21},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 55, 59)"},{"v":23},{"v":20},{"v":20},{"v":23},{"v":23},{"v":20},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 9)"},{"v":23},{"v":23},{"v":23},{"v":21},{"v":23},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 19)"},{"v":20},{"v":21},{"v":23},{"v":22},{"v":23},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 30)"},{"v":23},{"v":21},{"v":22},{"v":21},{"v":22},{"v":22},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 40)"},{"v":21},{"v":20},{"v":22},{"v":22},{"v":23},{"v":23},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 56, 50)"},{"v":23},{"v":20},{"v":23},{"v":21},{"v":23},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 1)"},{"v":23},{"v":20},{"v":21},{"v":21},{"v":21},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 11)"},{"v":21},{"v":22},{"v":21},{"v":20},{"v":22},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 22)"},{"v":23},{"v":23},{"v":22},{"v":22},{"v":22},{"v":21},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 32)"},{"v":22},{"v":21},{"v":23},{"v":22},{"v":23},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 42)"},{"v":22},{"v":23},{"v":20},{"v":22},{"v":20},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 57, 52)"},{"v":23},{"v":22},{"v":21},{"v":23},{"v":21},{"v":22},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 3)"},{"v":20},{"v":23},{"v":23},{"v":23},{"v":21},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 13)"},{"v":21},{"v":20},{"v":20},{"v":20},{"v":21},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 23)"},{"v":21},{"v":21},{"v":22},{"v":23},{"v":20},{"v":22},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 34)"},{"v":20},{"v":21},{"v":23},{"v":22},{"v":20},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 44)"},{"v":23},{"v":22},{"v":21},{"v":21},{"v":20},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 58, 54)"},{"v":22},{"v":21},{"v":22},{"v":21},{"v":23},{"v":22},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 5)"},{"v":21},{"v":22},{"v":20},{"v":23},{"v":20},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 15)"},{"v":23},{"v":21},{"v":20},{"v":22},{"v":23},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 26)"},{"v":23},{"v":23},{"v":21},{"v":21},{"v":21},{"v":20},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 36)"},{"v":21},{"v":20},{"v":21},{"v":22},{"v":20},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 46)"},{"v":20},{"v":21},{"v":22},{"v":23},{"v":21},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 12, 59, 57)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":20},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 7)"},{"v":22},{"v":21},{"v":20},{"v":23},{"v":21},{"v":23},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 17)"},{"v":21},{"v":20},{"v":23},{"v":20},{"v":21},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 28)"},{"v":23},{"v":22},{"v":20},{"v":21},{"v":23},{"v":20},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 38)"},{"v":23},{"v":23},{"v":22},{"v":21},{"v":21},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 48)"},{"v":21},{"v":20},{"v":21},{"v":23},{"v":20},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 0, 59)"},{"v":21},{"v":22},{"v":21},{"v":22},{"v":20},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 9)"},{"v":23},{"v":23},{"v":21},{"v":21},{"v":22},{"v":21},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 19)"},{"v":20},{"v":23},{"v":23},{"v":23},{"v":23},{"v":22},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 30)"},{"v":21},{"v":21},{"v":21},{"v":20},{"v":22},{"v":21},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 40)"},{"v":23},{"v":21},{"v":22},{"v":20},{"v":21},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 1, 50)"},{"v":21},{"v":22},{"v":20},{"v":20},{"v":22},{"v":23},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 1)"},{"v":20},{"v":23},{"v":22},{"v":20},{"v":21},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 11)"},{"v":20},{"v":20},{"v":20},{"v":23},{"v":23},{"v":22},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 21)"},{"v":20},{"v":21},{"v":22},{"v":20},{"v":21},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 32)"},{"v":22},{"v":23},{"v":22},{"v":22},{"v":23},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 42)"},{"v":22},{"v":20},{"v":21},{"v":22},{"v":20},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 2, 52)"},{"v":21},{"v":20},{"v":23},{"v":21},{"v":23},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 39, 50)"},{"v":21},{"v":22},{"v":22},{"v":22},{"v":20},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 0)"},{"v":23},{"v":20},{"v":22},{"v":22},{"v":23},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 10)"},{"v":23},{"v":23},{"v":23},{"v":22},{"v":23},{"v":21},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 21)"},{"v":22},{"v":22},{"v":22},{"v":23},{"v":22},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 31)"},{"v":22},{"v":22},{"v":23},{"v":20},{"v":21},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 41)"},{"v":20},{"v":20},{"v":20},{"v":23},{"v":23},{"v":22},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 40, 51)"},{"v":22},{"v":21},{"v":23},{"v":20},{"v":22},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 3)"},{"v":22},{"v":21},{"v":22},{"v":23},{"v":23},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 13)"},{"v":23},{"v":23},{"v":23},{"v":22},{"v":20},{"v":21},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 23)"},{"v":22},{"v":21},{"v":21},{"v":20},{"v":23},{"v":21},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 34)"},{"v":20},{"v":21},{"v":23},{"v":21},{"v":20},{"v":22},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 44)"},{"v":20},{"v":23},{"v":20},{"v":22},{"v":20},{"v":21},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 41, 54)"},{"v":20},{"v":20},{"v":22},{"v":20},{"v":20},{"v":20},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 5)"},{"v":20},{"v":23},{"v":23},{"v":23},{"v":22},{"v":21},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 15)"},{"v":21},{"v":20},{"v":23},{"v":22},{"v":22},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 25)"},{"v":21},{"v":21},{"v":21},{"v":21},{"v":21},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 36)"},{"v":20},{"v":20},{"v":21},{"v":22},{"v":21},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 46)"},{"v":20},{"v":23},{"v":21},{"v":22},{"v":22},{"v":23},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 42, 56)"},{"v":22},{"v":20},{"v":20},{"v":23},{"v":21},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 7)"},{"v":21},{"v":20},{"v":20},{"v":21},{"v":23},{"v":23},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 17)"},{"v":20},{"v":20},{"v":21},{"v":20},{"v":23},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 27)"},{"v":20},{"v":22},{"v":20},{"v":20},{"v":23},{"v":23},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 37)"},{"v":23},{"v":23},{"v":20},{"v":23},{"v":22},{"v":21},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 48)"},{"v":23},{"v":20},{"v":20},{"v":23},{"v":23},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 43, 58)"},{"v":23},{"v":20},{"v":20},{"v":21},{"v":20},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 8)"},{"v":22},{"v":20},{"v":23},{"v":20},{"v":23},{"v":21},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 19)"},{"v":20},{"v":20},{"v":21},{"v":23},{"v":21},{"v":22},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 29)"},{"v":22},{"v":21},{"v":23},{"v":22},{"v":22},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 39)"},{"v":20},{"v":23},{"v":21},{"v":22},{"v":20},{"v":23},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 44, 50)"},{"v":23},{"v":21},{"v":21},{"v":20},{"v":20},{"v":21},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 0)"},{"v":22},{"v":22},{"v":20},{"v":20},{"v":22},{"v":21},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 10)"},{"v":23},{"v":23},{"v":23},{"v":22},{"v":22},{"v":21},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 21)"},{"v":23},{"v":21},{"v":20},{"v":23},{"v":20},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 31)"},{"v":20},{"v":22},{"v":21},{"v":22},{"v":21},{"v":21},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 41)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":20},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 45, 52)"},{"v":22},{"v":20},{"v":22},{"v":22},{"v":20},{"v":23},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 3)"},{"v":21},{"v":23},{"v":22},{"v":20},{"v":21},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 13)"},{"v":20},{"v":21},{"v":23},{"v":20},{"v":22},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 23)"},{"v":21},{"v":20},{"v":21},{"v":20},{"v":21},{"v":20},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 34)"},{"v":23},{"v":22},{"v":22},{"v":22},{"v":21},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 44)"},{"v":23},{"v":23},{"v":20},{"v":20},{"v":23},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 46, 54)"},{"v":23},{"v":20},{"v":22},{"v":20},{"v":23},{"v":22},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 5)"},{"v":22},{"v":23},{"v":21},{"v":20},{"v":23},{"v":22},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 15)"},{"v":21},{"v":22},{"v":20},{"v":21},{"v":23},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 25)"},{"v":22},{"v":23},{"v":21},{"v":23},{"v":21},{"v":22},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 36)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":23},{"v":22},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 46)"},{"v":22},{"v":21},{"v":23},{"v":21},{"v":23},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 47, 56)"},{"v":23},{"v":23},{"v":21},{"v":21},{"v":21},{"v":23},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 7)"},{"v":23},{"v":20},{"v":22},{"v":23},{"v":22},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 17)"},{"v":23},{"v":20},{"v":22},{"v":20},{"v":20},{"v":21},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 28)"},{"v":23},{"v":22},{"v":22},{"v":21},{"v":23},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 38)"},{"v":23},{"v":21},{"v":23},{"v":23},{"v":21},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 48)"},{"v":21},{"v":21},{"v":21},{"v":21},{"v":21},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 48, 59)"},{"v":21},{"v":21},{"v":23},{"v":22},{"v":22},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 9)"},{"v":21},{"v":22},{"v":23},{"v":20},{"v":20},{"v":23},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 19)"},{"v":23},{"v":21},{"v":21},{"v":22},{"v":23},{"v":21},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 30)"},{"v":23},{"v":23},{"v":22},{"v":21},{"v":20},{"v":21},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 40)"},{"v":21},{"v":23},{"v":23},{"v":21},{"v":23},{"v":21},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 49, 50)"},{"v":22},{"v":22},{"v":20},{"v":23},{"v":22},{"v":21},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 1)"},{"v":20},{"v":22},{"v":23},{"v":23},{"v":20},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 11)"},{"v":23},{"v":20},{"v":21},{"v":23},{"v":23},{"v":21},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 22)"},{"v":23},{"v":21},{"v":21},{"v":21},{"v":20},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 32)"},{"v":23},{"v":20},{"v":20},{"v":22},{"v":22},{"v":21},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 42)"},{"v":23},{"v":22},{"v":22},{"v":23},{"v":21},{"v":22},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 50, 53)"},{"v":21},{"v":21},{"v":22},{"v":23},{"v":23},{"v":20},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 3)"},{"v":20},{"v":20},{"v":23},{"v":21},{"v":23},{"v":20},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 13)"},{"v":22},{"v":21},{"v":23},{"v":22},{"v":20},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 24)"},{"v":22},{"v":21},{"v":23},{"v":20},{"v":21},{"v":20},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 34)"},{"v":23},{"v":20},{"v":23},{"v":22},{"v":22},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 44)"},{"v":22},{"v":23},{"v":23},{"v":23},{"v":22},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 51, 55)"},{"v":22},{"v":23},{"v":22},{"v":21},{"v":21},{"v":23},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 5)"},{"v":20},{"v":20},{"v":20},{"v":22},{"v":21},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 15)"},{"v":22},{"v":22},{"v":21},{"v":21},{"v":21},{"v":23},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 26)"},{"v":23},{"v":22},{"v":23},{"v":22},{"v":21},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 36)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":23},{"v":23},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 46)"},{"v":23},{"v":23},{"v":21},{"v":21},{"v":20},{"v":21},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 52, 57)"},{"v":21},{"v":20},{"v":21},{"v":23},{"v":20},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 7)"},{"v":22},{"v":21},{"v":21},{"v":23},{"v":23},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 17)"},{"v":22},{"v":21},{"v":20},{"v":20},{"v":21},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 28)"},{"v":20},{"v":22},{"v":23},{"v":20},{"v":22},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 38)"},{"v":21},{"v":23},{"v":23},{"v":20},{"v":22},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 48)"},{"v":21},{"v":20},{"v":20},{"v":22},{"v":23},{"v":21},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 53, 59)"},{"v":22},{"v":21},{"v":23},{"v":21},{"v":22},{"v":20},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 9)"},{"v":22},{"v":21},{"v":20},{"v":20},{"v":20},{"v":23},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 19)"},{"v":21},{"v":21},{"v":23},{"v":22},{"v":21},{"v":22},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 30)"},{"v":22},{"v":20},{"v":23},{"v":22},{"v":20},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 40)"},{"v":23},{"v":21},{"v":22},{"v":20},{"v":23},{"v":20},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 54, 50)"},{"v":22},{"v":20},{"v":20},{"v":22},{"v":21},{"v":20},{"v":22},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 1)"},{"v":22},{"v":22},{"v":21},{"v":21},{"v":21},{"v":22},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 11)"},{"v":21},{"v":21},{"v":21},{"v":21},{"v":23},{"v":22},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 21)"},{"v":21},{"v":23},{"v":21},{"v":20},{"v":22},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 32)"},{"v":20},{"v":21},{"v":20},{"v":21},{"v":21},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 43)"},{"v":21},{"v":20},{"v":20},{"v":22},{"v":22},{"v":20},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 55, 53)"},{"v":20},{"v":21},{"v":22},{"v":20},{"v":22},{"v":23},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 4)"},{"v":23},{"v":22},{"v":20},{"v":21},{"v":21},{"v":23},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 14)"},{"v":21},{"v":20},{"v":23},{"v":20},{"v":23},{"v":22},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 24)"},{"v":22},{"v":20},{"v":22},{"v":22},{"v":20},{"v":23},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 35)"},{"v":23},{"v":21},{"v":22},{"v":20},{"v":22},{"v":22},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 45)"},{"v":21},{"v":22},{"v":21},{"v":21},{"v":20},{"v":21},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 56, 55)"},{"v":21},{"v":23},{"v":21},{"v":23},{"v":21},{"v":21},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 6)"},{"v":23},{"v":21},{"v":20},{"v":21},{"v":22},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 16)"},{"v":22},{"v":21},{"v":20},{"v":21},{"v":22},{"v":20},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 26)"},{"v":23},{"v":23},{"v":20},{"v":23},{"v":22},{"v":23},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 37)"},{"v":20},{"v":22},{"v":20},{"v":21},{"v":21},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 47)"},{"v":21},{"v":21},{"v":22},{"v":22},{"v":21},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 57, 57)"},{"v":20},{"v":23},{"v":23},{"v":22},{"v":22},{"v":22},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 7)"},{"v":20},{"v":22},{"v":23},{"v":21},{"v":20},{"v":23},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 18)"},{"v":22},{"v":23},{"v":23},{"v":23},{"v":20},{"v":20},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 28)"},{"v":22},{"v":20},{"v":20},{"v":20},{"v":22},{"v":20},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 39)"},{"v":21},{"v":20},{"v":23},{"v":21},{"v":23},{"v":23},{"v":21},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 49)"},{"v":21},{"v":20},{"v":23},{"v":22},{"v":23},{"v":22},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 58, 59)"},{"v":22},{"v":21},{"v":21},{"v":23},{"v":20},{"v":21},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 10)"},{"v":23},{"v":20},{"v":21},{"v":23},{"v":21},{"v":20},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 20)"},{"v":23},{"v":22},{"v":21},{"v":22},{"v":20},{"v":22},{"v":23},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 30)"},{"v":21},{"v":20},{"v":21},{"v":20},{"v":20},{"v":20},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 40)"},{"v":23},{"v":22},{"v":22},{"v":21},{"v":23},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 13, 59, 51)"},{"v":22},{"v":20},{"v":22},{"v":21},{"v":23},{"v":21},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 1)"},{"v":20},{"v":21},{"v":20},{"v":20},{"v":23},{"v":23},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 11)"},{"v":21},{"v":22},{"v":23},{"v":22},{"v":23},{"v":22},{"v":23},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 22)"},{"v":20},{"v":20},{"v":21},{"v":21},{"v":21},{"v":23},{"v":20},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 33)"},{"v":22},{"v":23},{"v":20},{"v":20},{"v":21},{"v":22},{"v":22},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 43)"},{"v":20},{"v":23},{"v":21},{"v":20},{"v":20},{"v":21},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 0, 54)"},{"v":23},{"v":23},{"v":23},{"v":22},{"v":20},{"v":23},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 4)"},{"v":20},{"v":23},{"v":21},{"v":20},{"v":23},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 14)"},{"v":23},{"v":20},{"v":23},{"v":21},{"v":22},{"v":21},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 24)"},{"v":22},{"v":21},{"v":23},{"v":22},{"v":20},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 35)"},{"v":23},{"v":22},{"v":22},{"v":23},{"v":21},{"v":23},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 45)"},{"v":21},{"v":20},{"v":21},{"v":20},{"v":22},{"v":23},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 1, 55)"},{"v":22},{"v":23},{"v":20},{"v":22},{"v":20},{"v":23},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 6)"},{"v":23},{"v":22},{"v":21},{"v":20},{"v":23},{"v":20},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 16)"},{"v":21},{"v":20},{"v":21},{"v":21},{"v":21},{"v":22},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 27)"},{"v":20},{"v":21},{"v":20},{"v":21},{"v":20},{"v":21},{"v":22},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 37)"},{"v":21},{"v":21},{"v":23},{"v":21},{"v":22},{"v":22},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 47)"},{"v":22},{"v":20},{"v":22},{"v":20},{"v":20},{"v":20},{"v":20},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 2, 58)"},{"v":21},{"v":20},{"v":22},{"v":21},{"v":22},{"v":21},{"v":22},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 8)"},{"v":21},{"v":22},{"v":23},{"v":22},{"v":20},{"v":22},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 18)"},{"v":21},{"v":22},{"v":20},{"v":20},{"v":21},{"v":20},{"v":20},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 29)"},{"v":23},{"v":22},{"v":20},{"v":22},{"v":22},{"v":21},{"v":21},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 39)"},{"v":21},{"v":21},{"v":23},{"v":23},{"v":21},{"v":22},{"v":23},{"v":23}]},{"c":[{"v":"Date(2017, 0, 11, 14, 3, 49)"},{"v":22},{"v":20},{"v":22},{"v":23},{"v":23},{"v":23},{"v":20},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 4, 0)"},{"v":21},{"v":22},{"v":22},{"v":23},{"v":23},{"v":22},{"v":21},{"v":21}]},{"c":[{"v":"Date(2017, 0, 11, 14, 4, 10)"},{"v":23},{"v":22},{"v":23},{"v":22},{"v":23},{"v":21},{"v":23},{"v":20}]},{"c":[{"v":"Date(2017, 0, 11, 14, 4, 20)"},{"v":23},{"v":20},{"v":21},{"v":22},{"v":20},{"v":22},{"v":21},{"v":22}]},{"c":[{"v":"Date(2017, 0, 11, 14, 4, 31)"},{"v":20},{"v":23},{"v":20},{"v":20},{"v":22},{"v":23},{"v":21},{"v":21}]}]})

   var chart = new google.visualization.ChartWrapper({
   'chartType': 'LineChart',
   'containerId': 'chart',
   'options': {
     // Use the same chart area width as the control for axis alignment.
     'chartArea': {'height': '80%', 'width': '80%',interpolateNulls: true},hAxis: {
      title: 'Datetime'
    },
    vAxis: {
      title: 'Temperature (°C)',
      minValue: 0
    },
     pointSize: 3,
   }
   // Convert the first column from 'date' to 'string'.

   });
  /* Change the format of the date column, used in chart, but not chart range filter */
   dashboard.bind(control, chart);
   dashboard.draw(data);

  var columns = [];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      columns.push(i);
      if (i > 0) {
          series[i - 1] = {};
      }
    }
  google.visualization.events.addListener(chart, 'select', function () {
    var sel = dashboard.getSelection();
    // if selection length is 0, we deselected an element
    if (sel.length > 0) {
      // if row is undefined, we clicked on the legend
      if (sel[0].row === null) {
        var col = sel[0].column;
        if (columns[col] == col) {
          // hide the data series
          columns[col] = {
            label: data.getColumnLabel(col),
            type: data.getColumnType(col),
            calc: function () {
              return null;
            }
          };

          // grey out the legend entry
          series[col - 1].color = '#CCCCCC';
        }
        else {
          // show the data series
          columns[col] = col;
          series[col - 1].color = null;
        }

        // set series option
        chart.setOption('series', series);

        var view = new google.visualization.DataView(data);
        view.setColumns(columns);
        dashboard.bind(control, chart);
        dashboard.draw(view);
      }
    }
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="dashboard">
    <div id="chart" style='width: 100%; height: 450px;'></div>
    <div id="control" style='width: 100%; height: 100px;'></div>
</div>

---

注意:加载库不需要jsapi

根据release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

只需使用...

<script src="https://www.gstatic.com/charts/loader.js"></script>

这将仅将load 语句更改为...

google.charts.load('current', {
  callback: drawVisualization,
  packages:['geochart']
});

(回调也可以添加到load语句中)