Google Charts信息中心 - 隐藏列

Question

我使用谷歌图表仪表板来显示折线图，我想在运行时控制显示的元素。 例如：

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}}
      );
}

我想以与此Google图表类别过滤器示例中的方式类似的方式控制Cats ， Blanket 1和Blanket 2的可见性。

Answer 1

一种方法是使用标志值映射到Cats / Blanket 1 / Blanket 2，然后通过适当的数据初始化调用该函数。

 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> 

Answer 2

我建议使用DataView隐藏列...

 google.charts.load('current', { packages: ['corechart'], callback: drawVisualization }); function drawVisualization(category) { 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] ]); var chart = new google.visualization.LineChart(document.getElementById('visualization')); var options = { curveType: 'function', width: 500, height: 400, vAxis: { maxValue: 10 } }; var view = new google.visualization.DataView(data); var viewColumns = [0]; switch (category) { case 'Cats': viewColumns.push(1); break; case 'Blanket 1': viewColumns.push(2); break; case 'Blanket 2': viewColumns.push(3); break; default: viewColumns.push(1); viewColumns.push(2); viewColumns.push(3); } view.setColumns(viewColumns); chart.draw(view, options); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="btn-group"> <button type="button" class="btn btn-default" onclick="drawVisualization()">All</button> <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>