谷歌图表仪表板 - 隐藏栏目 [英] Google Charts dashboard - hide columns

问题描述

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

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 ，方法类似于< a href =http://jsfiddle.net/fcqeA/1/ =nofollow>这个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>

这篇关于谷歌图表仪表板 - 隐藏栏目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！