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

Google Charts how to hide dynamically created series and show only one in legend?

本文关键字：一个 显示图 创建 何隐藏 谷歌 动态 隐藏 系列      更新时间：2023-09-26

我使用combochart，我的系列是从sql数据库中动态创建的。我想把它们都藏起来，但只展示第一个代表我球门线的。我怎样才能做到这一点？（在我为DataTabele构建阵列后，我知道系列的数量，可能我必须为系列构建一些阵列）

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

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

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

相关文章：