Google Charts 如何在 value = 0 时隐藏部分图例（动态图例）

Question

我有一个条形图，图例上有五列，但所有五列都显示在图例上。我想在没有数据时隐藏或删除图例中的列**（请在下面检查是否没有数据）或没有行数据时。

例如，如果加载图表时 5 个中有 3 个有数据，则图例应仅显示 3 列。场景 --> (Medication = 300, Groceries = 825, Garden = 0, Miscellaneous = 276) 将希望图例仅显示药物、杂货和杂项。

**没有数据可以像 Garden = 0 那样为 0，或者像 SportingEquip 根本不存在那样为空。

我已尝试阅读有关 https://developers.google.com/chart/interactive/docs/gallery/barchart 的一些文档 以及更多关于谷歌图表的在线文档。

var options = {
    backgroundColor: 'transparent',
    hAxis: { minValue: 0, format: '0', gridlines: { count: -1 } },
    colors: ['#0F2D52', '#789A3D', '#EE7623', '#231F20', '#7EA0C3'],
    legend: { position: 'bottom', textStyle: {fontSize: 6}},
    isStacked: true
};

var drawChart = function (data, options) {
    var chartDomId = "purchase_trends";

    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'BarChart',
        dataTable: data,
        options: options,
        containerId: chartDomId
    });
    wrapper.draw();
};
var data;

this.LoadChart = function () {
    if (data != null) {
        drawChart(data, options);
    } else {
        return $.ajax({
            type: 'GET',
            url: '/Charts/GetPurchaseTrends',
            dataType: "json",
            cache: false,
            success: function (jsonData) {
                data = new google.visualization.DataTable({
                    cols: [ { type: 'string', label: 'Year' },
            { type: 'number', label: 'Medication' },
            { type: 'number', label: 'Sporting Equip.' },
            { type: 'number', label: 'Groceries' },
                            { type: 'number', label: 'Garden & Lawn' },
            { type: 'number', label: 'Miscellaneous' }
                    ]
                });

                var results = jsonData;

                if (results.Data.length > 0) {
                    for (var i = 0; i < results.Data.length; i++) {
                        var yearNumber = results.Data[i].Year;
                        var medication = results.Data[i].Medication;
                        var sportingEquip = results.Data[i].Sporting;
                        var groceries = results.Data[i].Groceries;
                        var garden = result.Data[i].Garden;
                        var miscellaneous = result.Data[i].Miscellaneous;

                        data.addRow([yearNumber.toString(), medication, sportingEquip, groceries, garden, miscellaneous]);
                    }
                }
            },
            error: function (msg) {
                console.log(msg);
            },
            complete: function () {
                drawChart(data, options);
                $(window).resize(function () {
                    drawChart(data, options);
                });
            }
        });
    }
};

预期结果： 如果图表加载时 5 个中有 3 个有数据，则图例应仅显示 3 列。场景 --> (Medication = 300, Groceries = 825, Garden = 0, Miscellaneous = 276) 将希望图例仅显示药物、杂货和杂项。

当前结果：图例将显示所有 4 列（药物、杂货、花园、杂项）

Answer 1

您可以使用DataView 仅显示包含数据的列。

从数据表创建数据视图，

data = new google.visualization.DataView(data);

然后使用setColumns 方法，它采用列索引数组...

data.setColumns([0, 1, 3, 5]);

判断一列是否有数据，
使用数据表法 --> getColumnRange(columnIndex)

此方法返回一个对象，该对象具有指定列的min 和max 值的属性。

for (var i = 1; i < data.getNumberOfColumns(); i++) {
  var range = data.getColumnRange(i);
  if ((range.min + range.max) !== 0) {
    addColumn(i);
  }
}

请参阅下面的工作 sn-p 示例。
ajax 调用已替换为硬编码数据。

注意：您还需要管理图表颜色，
如果您希望每个系列都有特定的颜色...

var defaultColors = ['#0F2D52', '#789A3D', '#EE7623', '#231F20', '#7EA0C3'];

var options = {
    backgroundColor: 'transparent',
    hAxis: { minValue: 0, format: '0', gridlines: { count: -1 } },
    legend: { position: 'bottom', textStyle: {fontSize: 6}},
    isStacked: true
};

var drawChart = function (data, options) {
    var chartDomId = "purchase_trends";

    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'BarChart',
        dataTable: data,
        options: options,
        containerId: chartDomId
    });
    wrapper.draw();
};
var data;

var LoadChart = function () {
    if (data != null) {
        drawChart(data, options);
    } else {
        data = new google.visualization.DataTable({
            cols: [ { type: 'string', label: 'Year' },
                    { type: 'number', label: 'Medication' },
                    { type: 'number', label: 'Sporting Equip.' },
                    { type: 'number', label: 'Groceries' },
                    { type: 'number', label: 'Garden & Lawn' },
                    { type: 'number', label: 'Miscellaneous' }
            ]
        });

        var results = {Data: [
          {
            "Year": "2016",
            "Medication": 7,
            "Sporting": null,
            "Groceries": 4,
            "Garden": 0,
            "Miscellaneous": 5
          }, {
            "Year": "2017",
            "Medication": 7,
            "Sporting": null,
            "Groceries": 4,
            "Garden": 0,
            "Miscellaneous": 5
          }]
        };

        var columns = [0];
        var colors = [];

        if (results.Data.length > 0) {
            for (var i = 0; i < results.Data.length; i++) {
                var yearNumber = results.Data[i].Year;
                var medication = results.Data[i].Medication;
                var sportingEquip = results.Data[i].Sporting;
                var groceries = results.Data[i].Groceries;
                var garden = results.Data[i].Garden;
                var miscellaneous = results.Data[i].Miscellaneous;
                data.addRow([yearNumber.toString(), medication, sportingEquip, groceries, garden, miscellaneous]);
            }

            for (var i = 1; i < data.getNumberOfColumns(); i++) {
              var range = data.getColumnRange(i);
              if ((range.min + range.max) !== 0) {
                addColumn(i);
              }
            }

            if (columns.length < data.getNumberOfColumns()) {
              data = new google.visualization.DataView(data);
              data.setColumns(columns);
              options.colors = colors;
            } else {
              options.colors = defaultColors;
            }
        }

        function addColumn(colIndex) {
          columns.push(colIndex);
          colors.push(defaultColors[colIndex - 1]);
        }

        drawChart(data, options);
        $(window).resize(function () {
            drawChart(data, options);
        });
    }
};

google.charts.load('current', {
  packages:['controls', 'corechart']
}).then(LoadChart);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="purchase_trends"></div>