如何按行标题(类别)而不是第一列过滤 Google 可视化图表

Question

我有一个谷歌折线图，在x轴上显示月份，在y轴上显示金额。

我正在尝试创建一个类别过滤器，该过滤器将根据列类别过滤图表(在我的示例中是：

column1, column2, column3, column4, column5

我创建类别过滤器的所有尝试都导致第一列是过滤器(月(，而不是类别是过滤器。

google.charts.load('current', {
packages: ['line','controls','corechart']
}).then(function () {
var jsonData = [{"month":"February","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"March","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"April","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"May","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"June","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"July","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"August","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"September","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"October","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"November","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"December","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"Total","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{}];
// create blank data table
var data = new google.visualization.DataTable();
// parse json
jsonData.forEach(function (jsonRow, indexRow) {
// add columns
if (indexRow === 0) {
for (var column in jsonRow) {
if (column === 'month') {
data.addColumn('string', column);
} else {
data.addColumn('number', column);
}
}
}
// add row
var dataRow = [];
for (var column in jsonRow) {
if (column === 'month') {
dataRow.push(jsonRow[column]);
} else {
// convert string to number
dataRow.push(parseFloat(jsonRow[column]));
}
}
if (dataRow.length > 0) {
data.addRow(dataRow);
}
});
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard'));
var categoryPicker = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'line_top_x_control',
options: {
filterColumnIndex: 0,
}
});
var chart  = new google.visualization.ChartWrapper({
'chartType': 'Line',
'containerId': 'line_top_x',
'options': {
'width': 900,
'height': 200,
}
});
// var chart = new google.charts.Line(document.getElementById('line_top_x'));

dashboard.bind(categoryPicker, chart);
dashboard.draw(data);
//chart.draw(data, google.charts.Line.convertOptions(options));
});

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

Answer 1

您收到的错误来自复选框的值。
该值必须是列的索引 -->1
而不是列的名称 -->column1

此外，您需要手动设置颜色，因为当您隐藏系列时，

系列的其余部分将更改颜色。

此外，您需要使用vAxis.ticks或vAxis.viewWindow将
y 轴锁定到位。
否则，当您隐藏序列时，
Y 轴将重新缩放，序列将移动。

请参阅以下工作片段...

google.charts.load('current', {
packages: ['line','controls','corechart']
}).then(function () {
var jsonData = [{"month":"February","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"March","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"April","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"May","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"June","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"July","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"August","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"September","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"October","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"November","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"December","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"Total","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{}];
// create blank data table
var data = new google.visualization.DataTable();
// parse json
jsonData.forEach(function (jsonRow, indexRow) {
// add columns
if (indexRow === 0) {
for (var column in jsonRow) {
if (column === 'month') {
data.addColumn('string', column);
} else {
data.addColumn('number', column);
}
}
}
// add row
var dataRow = [];
for (var column in jsonRow) {
if (column === 'month') {
dataRow.push(jsonRow[column]);
} else {
// convert string to number
dataRow.push(parseFloat(jsonRow[column]));
}
}
if (dataRow.length > 0) {
data.addRow(dataRow);
}
});
var colors = ['red', 'yellow', 'green', 'blue', 'purple'];
colors.forEach(function (color, index) {
data.setColumnProperty(index + 1, 'color', color);
});
var options = {
chartArea: {
top: 12,
right: 0,
bottom: 72,
left: 72
},
legend: {
position: 'bottom'
},
colors: colors,
hAxis: {
slantedText: true
},
vAxis: {
ticks: [0, 1, 2, 3, 4, 5],
title: 'Amount'
},
bar: {
groupWidth: '90%'
},
height: 400
};
var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));
$('.series-chk').on('change', drawChart);
$(window).resize(drawChart);
drawChart();
function drawChart() {
var chartColors = [];
var chartColumns = [0];
var view = new google.visualization.DataView(data);
$.each($('.series-chk'), function (index, checkbox) {
var seriesColumn = parseInt(checkbox.value);
if (checkbox.checked) {
chartColumns.push(seriesColumn);
chartColors.push(data.getColumnProperty(seriesColumn, 'color'));
}
});
view.setColumns(chartColumns);
options.colors = chartColors;
chart.draw(view, options);
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input class="series-chk" id="chk-0" type="checkbox" value="1" checked /><label for="chk-0">Column 1</label>
<input class="series-chk" id="chk-1" type="checkbox" value="2" checked /><label for="chk-1">Column 2</label>
<input class="series-chk" id="chk-2" type="checkbox" value="3" checked /><label for="chk-2">Column 3</label>
<input class="series-chk" id="chk-3" type="checkbox" value="4" checked /><label for="chk-3">Column 4</label>
<input class="series-chk" id="chk-4" type="checkbox" value="5" checked /><label for="chk-4">Column 5</label>
<div id="line_top_x"></div>