У меня есть диаграмма с 6 сериями.Я хочу, чтобы пользователь мог нажимать на легенду, чтобы переключать видимость серии.
Я нашел этот пример и пытался включить его в мой код ниже, но ничего не происходит.Перед добавлением этого кода, если я нажму на одну из серий в легенде, серия станет более толстой, затем нажмите на нее еще раз, и она вернется к нормальной жизни, поверьте, это поведение по умолчанию.Однако с включенным этим кодом, когда серия становится толще, я ничего не могу сделать, т.е. увеличить масштаб или щелкнуть диаграмму, чтобы получить значение точки.
Не знаете, что мне не хватает?
Обновление
Я также пытался следовать этому сообщению , но тот же результат.
последнее обновление
Я изменил свой код на следующий.
Ошибка, которую я получаю сейчас, заключается в следующем ...
Uncaught Ошибка: недопустимый индекс столбца 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_moray.js: 91.js):.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) * 10 * * * * * * * * * * * * * * *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;
};