【发布时间】：2018-06-12 08:50:02
【问题描述】：
我有一个有 6 个系列的面积图。我希望用户能够单击图例来切换系列的可见性。
我找到了this example 并尝试将其包含在我的代码中，但没有任何反应。在添加此代码之前，如果我单击图例中的一个系列，该系列会变厚，然后再次单击它会恢复正常，相信这是一些默认行为。但是，一旦系列变得更厚，包含此代码后，我将无能为力，即缩放或单击图表以获取点的值。
不确定我错过了什么？
更新
我也尝试过关注这个post，但结果相同。
最新更新
我已将代码更改为以下内容。
我现在遇到的错误如下...
未捕获的错误：列索引 8 无效。应该是 [0-7] 范围内的整数。 在 gvjs_en (jsapi_compiled_default_module.js:75) 在 gvjs_P.gvjs_.uc (jsapi_compiled_default_module.js:92) 在 gvjs_P.gvjs_.Za (jsapi_compiled_default_module.js:91) 在 Data.displayed.reduce (jScore.js:220) 在 Array.reduce() 在 vparse (jScore.js:214) 在 showHideSeries (jScore.js:202) 在 gvjs_Zn。 (jsapi_compiled_default_module.js:179) 在 gvjs__n (jsapi_compiled_default_module.js:129) 在 gvjs_Zn.gvjs_.dispatchEvent (jsapi_compiled_default_module.js:127)
我的 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="scripts/jScore.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart', 'table'] });
</script>
</head>
<body>
<div id="chartScore" style="height:1000px"></div>
</body>
</html>
我的 JS 文件
var MyData = {};
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'api/Score',
dataType: 'json',
success: function (data) {
MyData.dataValues = data;
PopulateData();
DrawChartScores();
},
error: function () {
alert("Error loading data! Please try again");
}
});
};
var Data = {};
function PopulateData() {
Data = {
displayed: [...MyData.dataValues],
hidden: Object.keys(MyData.dataValues[0]).reduce((a, c) => {
a[c] = false;
return a;
}, {}),
map: Object.keys(MyData.dataValues[0])
};
}
function DrawChartScores() {
var dataValues = MyData.dataValues;
var data = new google.visualization.DataTable();
var options = {
title: 'Scores', width: '80%', height: '80%',
explorer:
{
keepInBounds: true,
actions: ['dragToZoom', 'rightClickToReset']
},
series: Data.map.reduce((a, c, i) => {
a[i] = {};
return a;
}, {})
};
data.addColumn('date', 'Day');
data.addColumn('number', 'A');
data.addColumn('number', 'B');
data.addColumn('number', 'C');
data.addColumn('number', 'D');
data.addColumn('number', 'E');
data.addColumn('number', 'F');
data.addColumn('number', 'Nrs');
// add data
for (var i = 0; i < dataValues.length; i++) {
data.addRow([new Date(dataValues[i].DateRet), dataValues[i].A, dataValues[i].B, dataValues[i].C,
dataValues[i].D, dataValues[i].E, dataValues[i].F, dataValues[i].Nrs]);
}
var chart = new google.visualization.AreaChart(document.getElementById('chartScore'));
var last = {
column: true,
row: true
};
function showHideSeries() {
var sel = chart.getSelection();
if (sel.length === 0 && last.row === null) {
Data.hidden[Data.map[last.column]] = !Data.hidden[Data.map[last.column]];
} else if (sel.length && sel[0].row === null) {
// toggle the current item selected
Data.hidden[Data.map[sel[0].column]] = !Data.hidden[Data.map[sel[0].column]];
last = sel[0];
} else {
return;
}
vparse(data);
options = vkillLegend(options);
chart.draw(data, options);
};
google.visualization.events.addListener(chart, 'select', showHideSeries);
chart.draw(data, options);
};
function vparse(data) {
Data.displayed.reduce((a, c, i) => {
for (let k in c) {
if (k === "DateRet") continue;
if (Data.hidden[k])
data.setValue(i, Data.map.indexOf(k), null);
else
data.setValue(i, Data.map.indexOf(k), c[k]);
}
return true;
}, []);
return data;
}
function vkillLegend(options) {
options.series = Object.keys(options.series).reduce((a, c, i) => {
let current = {};
if (Data.hidden[Data.map[i]]) current.color = "#CCCCCC";
else c.color = null;
a[i - 1] = current;
return a;
}, {});
return options;
};
【问题讨论】：
标签： javascript jquery google-api google-visualization