谷歌图表仪表板 - 隐藏栏目(Google Charts dashboard - hide columns)

其他开发 IT屋
百度翻译此文   有道翻译此文
问 题

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

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.

解决方案

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屋 » Google Charts dashboard - hide columns

问 题

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

  function drawVisualization(){
//创建并填充数据表。
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}}
);
}


我想要控制 Cats ,毛毯1 和毛毯2 ,方法类似于这个Google Charts类别过滤器示例

解决方案

一种方法是使用标志值映射到Cats / Blanket 1 / Blanket 2,然后相应地调用具有适当数据初始化的函数。



 
 < 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')”>猫< / 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屋 » 谷歌图表仪表板 - 隐藏栏目

官方微信
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注
与百万开发者在一起