我想制作一个具有隐藏/显示功能的组合(线/条)图。我遇到的问题是我不知道如何指定索引更改(对于 javascript 来说是新的)这是我的示例(取消选中前两个复选框之一并重新选中它以查看问题): http://jsfiddle.net/cosnm3oe/
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Temperature', 'Humidity', 'Runs'],
[new Date(2017, 3, 26, 14, 46), 80.8, 39.6, 0],
[new Date(2017, 3, 26, 14, 51), 80.4, 40.3, 0],
[new Date(2017, 3, 26, 14, 57), 79.9, 40.7, 0],
[new Date(2017, 3, 26, 15, 2), 79.5, 41.1, 50],
[new Date(2017, 3, 26, 15, 7), 79.2, 42.2, 50],
[new Date(2017, 3, 26, 15, 12), 78.8, 42.1, 0],
[new Date(2017, 3, 26, 15, 17), 78.6, 43.1, 50],
[new Date(2017, 3, 26, 15, 22), 78.3, 43.2, 0]
]);
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM dd, yyyy h:mm a"
});
date_formatter.format(data, 0);
showEvery = 1;
var seriesColors = ['red', 'blue', 'orange', 'green'];
var options = {
strictFirstColumnType: true,
colors: seriesColors,
width: '100%',
height: '60%',
'legend': {
'position': 'top'
},
hAxis: {
slantedTextAngle: 45,
slantedText: true,
showTextEvery: showEvery
},
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: 90,
min: 27.2
}
},
textStyle: {
fontName: 'Ariel',
fontSize: 40,
bold: false
},
interpolateNulls: false,
seriesType: 'line',
series: {
2: {
type: 'bars'
}
},
chartArea: {
left: 40,
top: 20,
width: "100%"
}
};
var view = new google.visualization.DataView(data);
var chart = new google.visualization.LineChart($('#chart_div')[0]);
chart.draw(view, options);
$('#series').find(':checkbox').change(function() {
var cols = [0];
var colors = [];
$('#series').find(':checkbox:checked').each(function() {
console.log(this);
var value = parseInt($(this).attr('value'));
cols.push(value);
colors.push(seriesColors[value - 1]);
console.log(value, 'colors: ', colors);
});
view.setColumns(cols);
chart.draw(view, {
strictFirstColumnType: true,
series: {
value: {
type: 'bars'
}
},
colors: colors,
width: '100%',
height: '60%',
'legend': {
'position': 'top'
},
hAxis: {
slantedTextAngle: 45,
slantedText: true,
showTextEvery: showEvery
},
textStyle: {
fontName: 'Ariel',
fontSize: 40,
bold: false
},
interpolateNulls: false,
seriesType: 'line',
series: {
1: {
type: 'bars'
}
},
chartArea: {
left: 40,
top: 20,
width: "100%"
}
});
});
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length > 0) {
alert('selected series: ' + selection[0].column);
}
});
}
和 html:
<ul id="series" style="list-style: none">
<label><input type="checkbox" name="series" value="1" checked="true" /> Temperature</label>
<label><input type="checkbox" name="series" value="2" checked="true" /> Humidity</label>
<label><input type="checkbox" name="series" value="3" checked="true" /> Runs</label>
</ul>
<div id="chart_div"></div>
谢谢!
最佳答案
看起来您希望'Runs'始终为'bars'
因此，当选择“运行”时，
将系列类型分配给最后一列/系列号
if (value === 3) {
options.series = {};
options.series[cols.length - 2] = {type: 'bars'};
}
请参阅以下工作片段...
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Temperature', 'Humidity', 'Runs'],
[new Date(2017, 3, 26, 14, 46), 80.8, 39.6, 0],
[new Date(2017, 3, 26, 14, 51), 80.4, 40.3, 0],
[new Date(2017, 3, 26, 14, 57), 79.9, 40.7, 0],
[new Date(2017, 3, 26, 15, 2), 79.5, 41.1, 50],
[new Date(2017, 3, 26, 15, 7), 79.2, 42.2, 50],
[new Date(2017, 3, 26, 15, 12), 78.8, 42.1, 0],
[new Date(2017, 3, 26, 15, 17), 78.6, 43.1, 50],
[new Date(2017, 3, 26, 15, 22), 78.3, 43.2, 0]
]);
var date_formatter = new google.visualization.DateFormat({
pattern: "MMM dd, yyyy h:mm a"
});
date_formatter.format(data, 0);
showEvery = 1;
var seriesColors = ['red', 'blue', 'orange', 'green'];
var options = {
strictFirstColumnType: true,
colors: seriesColors,
width: '100%',
height: '60%',
'legend': {
'position': 'top'
},
hAxis: {
slantedTextAngle: 45,
slantedText: true,
showTextEvery: showEvery
},
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: 90,
min: 27.2
}
},
textStyle: {
fontName: 'Ariel',
fontSize: 40,
bold: false
},
interpolateNulls: false,
seriesType: 'line',
series: {
2: {
type: 'bars'
}
},
chartArea: {
left: 40,
top: 20,
width: "100%"
}
};
var view = new google.visualization.DataView(data);
var chart = new google.visualization.LineChart($('#chart_div')[0]);
chart.draw(view, options);
$('#series').find(':checkbox').change(function() {
var cols = [0];
var colors = [];
options.series = null;
$('#series').find(':checkbox:checked').each(function() {
var value = parseInt($(this).attr('value'));
cols.push(value);
colors.push(seriesColors[value - 1]);
if (value === 3) {
options.series = {};
options.series[cols.length - 2] = {type: 'bars'};
}
});
view.setColumns(cols);
options.colors = colors;
chart.draw(view, options);
});
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
if (selection.length > 0) {
alert('selected series: ' + selection[0].column);
}
});
}<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul id="series" style="list-style: none">
<label>
<input type="checkbox" name="series" value="1" checked="true" /> Temperature</label>
<label>
<input type="checkbox" name="series" value="2" checked="true" /> Humidity</label>
<label>
<input type="checkbox" name="series" value="3" checked="true" /> Runs</label>
</ul>
<div id="chart_div"></div>关于javascript - 在 Google 图表(组合图表)中显示/隐藏线条/条形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43663540/