谷歌图表如何隐藏动态创建的系列并仅在图例中显示一个?

时间:2016-01-02 14:09:04

标签: javascript google-visualization legend series

我使用combochart,我的系列是从sql数据库动态创建的。我想隐藏所有这些,但只显示代表我的球门线的第一个。我怎样才能做到这一点? (我知道为DataTabele构建数组后的系列数量,可能我需要为系列构建一些数组)

var options = {
        legend: {position: "none"},
        isStacked: true,
        seriesType: 'bars',
        series: {
            1: {
                type: 'line',
                color: 'red',
                }
            },
    };

1 个答案:

答案 0 :(得分:3)

当您知道图例中应该可见的列索引时,您可以根据列动态创建系列选项。



google.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
         ['Month', 'Average', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda'],
         ['2004/05',      614.6,  165,      938,         522,             998,           450],
         ['2005/06',      682,  135,      1120,        599,             1268,          288],
         ['2006/07',      623,  157,      1167,        587,             807,           397],
         ['2007/08',      609.4,  139,      1110,        615,             968,           215],
         ['2008/09',      569.6,  136,      691,         629,             1026,          366]
      ]);
      

    var options = {
      isStacked: true,
      legend: {position: "top"},      
      seriesType: 'bars',
      series: (function(d,i){
      	var s={},c=d.getNumberOfColumns();
        for(var k=0;k<c;++k){
        	s[k]=(k===i)
                 ?{type:'line',color: 'red'}
                 :{visibleInLegend:false}
        }
        return s;
      })(data,//the dataTable
        0//index of the column which should be visible in the legend
       )
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
&#13;
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="chart_div" ></div>
&#13;
&#13;
&#13;