看起来当两个不同字段的值相同时,您只能在顶部看到最新的值。
有没有办法解决重叠问题,以便我们可以看到属于该值的每个字段?
示例在这里 -
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var userArray = [
'x',
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'k'
];
var data = new google.visualization.DataTable();
for (var i = 0; i < userArray.length ; i++) {
data.addColumn('number', userArray[i]);
}
data.addRows([
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 1, 0, 0, 1, 2, 0, 1, 0, 0],
[2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]);
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'Date'
},
vAxis: {
title: 'item'
},
series: {
1: {
curveType: 'function'
}
}
};
var chart = new google.charts.Line(document.getElementById('ex2'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
“b”、“e”和“h”字段的“y”值为“1”,但图表上只看到“h”,不知道这一点的用户可能会不知道“b”和“e”的“y”值也为“1”,我该如何解释这种重叠?
最佳答案
解决这个问题的方法是使用 focusTarget: 'category'
Google dev docs 的特殊选项
但是,代码的 Material 版本上的此设置似乎也存在错误(错误的 fiddle http://jsfiddle.net/6hzc5wmt/3/ 这并不是真正的错误,而是尚未实现的功能)。我不得不使用经典版本折线图:
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var userArray = [
'x',
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'k'
];
var data = new google.visualization.DataTable();
for (var i = 0; i < userArray.length ; i++) {
data.addColumn('number', userArray[i]);
}
data.addRows([
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 1, 0, 0, 1, 2, 0, 1, 0, 0],
[2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]);
var options = {
focusTarget: 'category',
width: 1000,
height: 563,
hAxis: {
title: 'Date'
},
vAxis: {
title: 'item'
},
series: {
1: {
curveType: 'function'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('ex2'));
chart.draw(data, options);
}
关于javascript - 如何解决 Google Visualization - Materials Line 中的重叠问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28885512/