在Google可视化图表中自动显示图例

时间:2014-06-05 12:42:54

标签: google-visualization legend

我在this fiddle中有一个示例Google可视化信息中心,其中的图表绘制为

 Chart = new google.visualization.ChartWrapper({
          'chartType': 'ColumnChart',
          'containerId': 'chart1',
          'options': {
            'width': 600,
            'height': 180,
         'isStacked': true,
         'legend': 'top',
          }
        });

对于控制选择器中的 CPU ,只有value1。但图表图例显示了两者。如果图例{0}有0,则如何隐藏图例{/ 1}。

1 个答案:

答案 0 :(得分:2)

每次状态在控件上发生变化时,您需要获取图表使用的数据并对其进行解析,以确定每个数据系列的所选范围内是否存在非0值。如果存在非0值,请将数据系列添加到图表的view.columns参数中,否则请将其删除:

google.visualization.events.addListener(categoryPicker, 'statechange', function () {
    google.visualization.events.addOneTimeListener(Chart, 'ready', function () {
        var cols = [0];
        var dt = Chart.getDataTable();
        for (var i = 1; i < dt.getNumberOfColumns(); i++) {
            var range = dt.getColumnRange(i);
            console.dir(range);
            // assumes there are no null values
            if (range.min !== 0 || range.max !== 0) {
                cols.push(i);
            }
        }
        var view = Chart.getView() || {};
        view.columns = cols;
        Chart.setView(view);
        Chart.draw();
    });
});

fiddle