谷歌图表仪表板 - 隐藏栏目

本文介绍了谷歌图表仪表板 - 隐藏栏目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我使用谷歌图表仪表板为了显示折线图，我想在运行时控制显示的元素。 例如： I use google charts dashboard in order to display a line chart and I would like to control the displayed elements in run-time.for example:function drawVisualization() {// Create and populate the data table.var data = google.visualization.arrayToDataTable([ ['x', 'Cats', 'Blanket 1', 'Blanket 2'], ['A', 1, 1, 0.5 ], ['B', 2, 0.5, 1 ], ['C', 4, 1, 0.5 ], ['D', 8, 0.5, 1 ], ['E', 7, 1, 0.5 ], ['F', 7, 0.5, 1 ], ['G', 8, 1, 0.5 ], ['H', 4, 0.5, 1 ], ['I', 2, 1, 0.5 ], ['J', 3.5, 0.5, 1 ], ['K', 3, 1, 0.5 ], ['L', 3.5, 0.5, 1 ], ['M', 1, 1, 0.5 ], ['N', 1, 0.5, 1 ]]);// Create and draw the visualization.new google.visualization.LineChart(document.getElementById('visualization')). draw(data, {curveType: "function", width: 500, height: 400, vAxis: {maxValue: 10}} );}我想要控制 Cats ，毛毯1 和毛毯2 ，方法类似于这个Google Charts类别过滤器示例。 I would like to control the visibility of Cats, Blanket 1 and Blanket 2 in a similar way to how it is being done in this Google Charts category filter example.推荐答案一种方法是使用标志值映射到Cats / Blanket 1 / Blanket 2，然后相应地调用具有适当数据初始化的函数。 One way would be to use a flag value to map to Cats / Blanket 1 / Blanket 2 and then accordingly call the function with suitable data initialization. google.charts.load('current', {packages: ['corechart']});function drawVisualization(flag) { if(flag=="cats") var data = google.visualization.arrayToDataTable([ ['x', 'Cats' ], ['A', 1 ], ['B', 2 ], ['C', 4 ], ['D', 8 ], ['E', 7 ], ['F', 7 ], ['G', 8 ], ['H', 4 ], ['I', 2 ], ['J', 3.5 ], ['K', 3 ], ['L', 3.5 ], ['M', 1 ], ['N', 1 ] ]); else if (flag=="Blanket 1") var data = google.visualization.arrayToDataTable([ ['x', 'Blanket 1'], ['A', 1], ['B', 0.5], ['C', 1], ['D', 0.5], ['E', 1], ['F', 0.5], ['G', 1], ['H', 0.5], ['I', 1], ['J', 0.5], ['K', 1], ['L', 0.5], ['M', 1 ], ['N', 0.5 ] ]); else if(flag=="Blanket 2") var data = google.visualization.arrayToDataTable([ ['x', 'Blanket 2'], ['A', 0.5], ['B', 1], ['C', 0.5], ['D', 1], ['E', 0.5], ['F', 1], ['G', 0.5], ['H', 1], ['I', 0.5], ['J', 1], ['K', 0.5], ['L', 1], ['M', 0.5], ['N', 1] ]); else var data = google.visualization.arrayToDataTable([ ['x', 'Cats', 'Blanket 1', 'Blanket 2'], ['A', 1, 1, 0.5], ['B', 2, 0.5, 1], ['C', 4, 1, 0.5], ['D', 8, 0.5, 1], ['E', 7, 1, 0.5], ['F', 7, 0.5, 1], ['G', 8, 1, 0.5], ['H', 4, 0.5, 1], ['I', 2, 1, 0.5], ['J', 3.5, 0.5, 1], ['K', 3, 1, 0.5], ['L', 3.5, 0.5, 1], ['M', 1, 1, 0.5], ['N', 1, 0.5, 1] ]); new google.visualization.LineChart(document.getElementById('visualization')). draw(data, {curveType: "function", width: 500, height: 400, vAxis: {maxValue: 10}} );} <script src="https://www.gstatic.com/charts/loader.js"></script> <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default" onclick="drawVisualization('Cats')">Cats</button> <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 1')">Blanket 1</button> <button type="button" class="btn btn-default" onclick="drawVisualization('Blanket 2')">Blanket 2</button></div><div id="visualization"></div> 这篇关于谷歌图表仪表板 - 隐藏栏目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！