Question

嗯，我是谷歌排行榜的新手，我玩了类别过滤器一段时间。但我无法让它工作，我喜欢的方式

 var data = new google.visualization.DataTable();
   data.addColumn("string", "Date");
   data.addColumn("number", "Retailer 1");
   data.addColumn("number", "Retailer 3");
   data.addColumn("number", "Retailer 2");

   data.addRows([
      ["01/12", 160, {v: 208, f: '208'},{v: 320, f: '320'}],
      ["02/12", 570, {v: 741, f: '741'},{v: 1140, f: '1140'}],
      ["03/12", 385, {v: 497, f: '497'},{v: 770, f: '770'}],
      ["04/12", 328, {v: 425, f: '425'},{v: 656, f: '656'}],
      ["05/12", 445, {v: 577, f: '577'},{v: 890, f: '890'}],
      ["06/12", 406, {v: 525, f: '525'},{v: 812, f: '812'}],
      ["07/12", 249, {v: 475, f: '475'},{v: 772, f: '772'}],

   ]);

   var columnsTable = new google.visualization.DataTable();
    columnsTable.addColumn('number', 'colIndex');
    columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};
    // put the columns into this data table (skip column 0)
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
        columnsTable.addRow([i, data.getColumnLabel(i)]);


    }
    // you can set individual columns to be the default columns (instead of populating via the loop above) like this:
    // initState.selectedValues.push(data.getColumnLabel(4));

    var chart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            width: 420,
            height: 200,
            isStacked: true ,
            title:'Sum Of Quant Column Labels By Retailers',
            colors:['#3366cc','#FF5733','#808080'],
            bar: {groupWidth:'40%'},
            chartArea:{left:32,width:'70%'},
        }
    });

    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            filterColumnIndex: 1,
            useFormattedValue: true,
            ui: {

                label: 'Retailers',
                allowTyping: false,
                allowMultiple: false,
                caption : 'All Retailers',
                allowNone: true,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: initState
    });

    function setChartView () {
        var state = columnFilter.getState();
        var row;
        var view = {
            columns: [0]
        };
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            view.columns.push(columnsTable.getValue(row, 0));
        }
        // sort the indices into their original order
        view.columns.sort(function (a, b) {
            return (a - b);
        });
        chart.setView(view);
        chart.draw();
    }
    google.visualization.events.addListener(columnFilter, 'statechange', setChartView);

    setChartView();
    columnFilter.draw();

这是我的代码，现在发生的事情是我无法一次性选择所有数据的选项，我为'All Retailers'添加了一个标题，但它只是一个标题没有别的，当我选择“所有零售商”图表不会修改。

我想要的只是当我选择“所有零售商”时，所有零售商都会在图表中显示。任何帮助都会为我做好事。

谢谢，Ankit Rauthan

Answer 1

因为过滤器用于选择要显示的列，所以如果未选择任何内容，则只会将一列[0]传递给view 这导致图表上的错误
柱形图需要至少绘制两列......

问题从此处开始，如果未选择任何内容，则不会向view添加其他列...

var view = {
    columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
    row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
    view.columns.push(columnsTable.getValue(row, 0));
}

要更正此问题，请在未选择任何内容时删除view，
这将导致图表显示所有列...

if (state.selectedValues.length > 0) {
  chart.setView(view);
} else {
  chart.setView(null);
}

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
 var data = new google.visualization.DataTable();
   data.addColumn("string", "Date");
   data.addColumn("number", "Retailer 1");
   data.addColumn("number", "Retailer 3");
   data.addColumn("number", "Retailer 2");

   data.addRows([
      ["01/12", 160, {v: 208, f: '208'},{v: 320, f: '320'}],
      ["02/12", 570, {v: 741, f: '741'},{v: 1140, f: '1140'}],
      ["03/12", 385, {v: 497, f: '497'},{v: 770, f: '770'}],
      ["04/12", 328, {v: 425, f: '425'},{v: 656, f: '656'}],
      ["05/12", 445, {v: 577, f: '577'},{v: 890, f: '890'}],
      ["06/12", 406, {v: 525, f: '525'},{v: 812, f: '812'}],
      ["07/12", 249, {v: 475, f: '475'},{v: 772, f: '772'}],

   ]);

   var columnsTable = new google.visualization.DataTable();
    columnsTable.addColumn('number', 'colIndex');
    columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};
    // put the columns into this data table (skip column 0)
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
        columnsTable.addRow([i, data.getColumnLabel(i)]);


    }
    // you can set individual columns to be the default columns (instead of populating via the loop above) like this:
    // initState.selectedValues.push(data.getColumnLabel(4));

    var chart = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            width: 420,
            height: 200,
            isStacked: true ,
            title:'Sum Of Quant Column Labels By Retailers',
            colors:['#3366cc','#FF5733','#808080'],
            bar: {groupWidth:'40%'},
            chartArea:{left:32,width:'70%'},
        }
    });

    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            filterColumnIndex: 1,
            useFormattedValue: true,
            ui: {

                label: 'Retailers',
                allowTyping: false,
                allowMultiple: false,
                caption : 'All Retailers',
                allowNone: true,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: initState
    });

    function setChartView () {
        var state = columnFilter.getState();
        var row;
        var view = {
            columns: [0]
        };
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            view.columns.push(columnsTable.getValue(row, 0));
        }
        // sort the indices into their original order
        view.columns.sort(function (a, b) {
            return (a - b);
        });
        if (state.selectedValues.length > 0) {
          chart.setView(view);
        } else {
          chart.setView(null);
        }
        chart.draw();
    }
    google.visualization.events.addListener(columnFilter, 'statechange', setChartView);

    setChartView();
    columnFilter.draw();

}

＆＃13;

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

＆＃13;

如何在Google图表

1 个答案: