0
を持っていません。
var opties = [];
function geselecteerdeOpties(){
opties = [];
for(var i = 0; i <= 7; i++){
var id = "#checkbox" + i;
if($(id).is(':checked') == 1){
opties.push(i);
}
}
}
var datasetLabels = [];
function getChartData() {
leeftijden = $("#slider").slider('getValue');
var xmlhttp = new XMLHttpRequest();
var leeftijd;
if (leeftijden[0] == leeftijden[1]) {
leeftijd = leeftijden[0];
var url = "http://" + ip + ":8181/measurementsMasterT/getGraphData/" + String(userId) +"/" + String(experimentID) +"/" + leeftijd;
}
else {
var url = "http://" + ip + ":8181/measurementsMasterT/getGraphData/" + String(userId) +"/" + String(experimentID);
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
data = JSON.parse(xmlhttp.responseText);
geselecteerdeOpties();
for (var i = 0; i <= 8; i++) {
barChartData.labels.splice(-1, 1); // remove the label first
barChartData.datasets.forEach(function(dataset, datasetIndex) {
dataset.data.pop();
});
}
theChart.update();
console.log("datasetLabels " + datasetLabels + " leeftijd " + leeftijd);
if (jQuery.inArray(leeftijd, datasetLabels) == -1) {
console.log("test test test");
}
if (leeftijd != null && (jQuery.inArray(leeftijd, datasetLabels) == -1)) {
console.log("wel");
for (var i = 0; i <= barChartData.datasets.length; i++) {
barChartData.datasets.pop();
}
for (var i = leeftijden[0]; i <= leeftijden[1]; i++) {
nieuweDataSet(leeftijd);
datasetLabels += leeftijd;
}
}
for(var i = 0; i<opties.length; i++){
switch (opties[i]) {
case 0:
barChartData.labels.push("Gemiddelde Afstand");
nieuweData("Gemiddelde Afstand", data, opties[i]);
console.log("dataset0");
break;
case 1:
barChartData.labels.push("Variantie Afstand");
nieuweData("Variantie Afstand", data, opties[i]);
console.log("dataset1");
break;
case 2:
barChartData.labels.push("Stdev Afstand");
nieuweData("Stdev Afstand", data, opties[i]);
console.log("dataset2");
break;
case 3:
barChartData.labels.push("Stdev Snelheid");
nieuweData("Stdev Snelheid", data, opties[i]);
console.log("dataset3");
break;
case 4:
barChartData.labels.push("Variantie Snelheid");
nieuweData("Variantie Snelheid", data, opties[i]);
console.log("dataset4");
break;
case 5:
barChartData.labels.push("Gemiddelde SnelheidVerandering");
nieuweData("Gemiddelde SnelheidVerandering", data, opties[i]);
console.log("dataset5");
break;
case 6:
barChartData.labels.push("Tijd in Doel");
nieuweData("Tijd in Doel", data, opties[i]);
console.log("dataset6");
break;
case 7:
barChartData.labels.push("Keren uit Doel");
nieuweData("Keren uit Doel", data, opties[i]);
console.log("dataset7");
}
}
}
};
// $.ajax({
// url: url,
//
// dataType: "json",
// data: initialserverData,
// success: function(data, textStatus, jqXHR) {
// geselecteerdeOpties();
// console.log("getChardata opties: " + opties);
// for (var i = 0; i <= barChartData.datasets.length; i++) {
// barChartData.datasets.pop();
// }
// for(var i = 0; i<opties.length; i++){
// switch (opties[i]) {
// case 0:
// nieuweDataSet("Gemiddelde Afstand");
// console.log("dataset0");
// break;
// case 1:
// nieuweDataSet("Variantie Afstand");
// console.log("dataset1");
// break;
// case 2:
// nieuweDataSet("Stdev Afstand");
// console.log("dataset2");
// break;
// case 3:
// nieuweDataSet("Stdev Snelheid");
// console.log("dataset3");
// break;
// case 4:
// nieuweDataSet("Variantie Snelheid");
// console.log("dataset4");
// break;
// case 5:
// nieuweDataSet("Gemiddelde SnelheidVerandering");
// console.log("dataset5");
// break;
// case 6:
// nieuweDataSet("Tijd in Doel");
// console.log("dataset6");
// break;
// case 7:
// nieuweDataSet("Keren uit Doel");
// console.log("dataset7");
// }
// }
// nieuweData(data);
// }
// });
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
var barChartData = {labels: [], datasets: []};
window.onload = loadGraph();
function reload(){
console.log("reload");
// theChart.destroy();
geselecteerdeOpties();
// $('#barChart').remove(); // this is my <canvas> element
// $('#chart').append('<canvas id="barChart" width="100%" height="30" class="chartjs-render-monitor"></canvas>');
loadGraph();
}
function loadGraph() {
var ctx = document.getElementById("barChart").getContext("2d");
theChart = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Data'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
getChartData();
};
function getRandomColor() {
var letters = 'ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function nieuweDataSet(naam){
var kleur = getRandomColor();
var newDataset = {
label: naam,
backgroundColor:[kleur],
borderColor: [kleur],
borderWidth: 1,
data: []
};
barChartData.datasets.push(newDataset);
theChart.update();
}
function nieuweData(naam, gegevens, j) {
//geselecteerdeOpties();
console.log("nieuweData " + naam + "/" + j);
console.log(barChartData.datasets.length);
if (barChartData.datasets.length > 0) {
console.log("naam pushed");
//barChartData.labels.push(naam);
for (var index = 0; index < barChartData.datasets.length; ++index) {
//for (var i = 0; i < opties.length; i++) {
console.log("test1");
switch (j) {
case 0:
barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].gemiddleAfstand))).toFixed(4));
theChart.update();
break;
case 1:
console.log("test2");
barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].variantieAfstand))).toFixed(4));
theChart.update();
break;
case 2:
barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].stdevAfstand))).toFixed(4));
theChart.update();
break;
case 3:
barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].stdevSnelheidVeranderingen))).toFixed(4));
theChart.update();
break;
case 4:
barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].variantieSnelheidVeranderingen))).toFixed(4));
theChart.update();
break;
case 5:
barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].snelheidVeranderingenGemiddelde))).toFixed(4));
theChart.update();
break;
case 6:
barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].tijdInHetDoel))).toFixed(4));
theChart.update();
break;
case 7:
barChartData.datasets[0].data.push(parseFloat((JSON.stringify(gegevens.data[0].aantalKeerUitDoel))).toFixed(4));
theChart.update();
}
//}
}
theChart.update();
//theChart.destroy();
}
};これは純粋にその周りチャート、すべてを処理するスクリプトです。私は何が間違っているのかを知るために多くのことを試しているので、コードはちょっと混乱しているかもしれませんが、役に立たないでしょう。
関数nieuweDataでは、データセットにデータを追加する方法を確認できます。この関数はforループで呼び出されます。 Optiesは、異なるチェックボックスの値を含む配列を表し、チェックされたものだけを表します。だから私は、ユーザーがグラフ上で見たいデータを知っています。
forループは、クリックされたすべてのチェックボックスに対してnieuweData functieを1回呼び出します。この関数では、JSONの正しい部分をすべてのデータセットのデータにプッシュします（したがって、nieuweData（）のforループ）。
グラフによって第2のデータにデータセットと同じ色が表示されないことがありますか？ところで私は、コードが乱雑であることを知っていると代はjQuery.inArray（）のような奇妙なことかもしれない - あなたは
getRandomColor()
を呼び出しているので>コード
そうそう、私はその.destroyを見つけたので、私は（すべてのデータおよびデータセットをポップには）本当に私はgetChartdata機能を思い出した場合、それが重複してしまうことを意味し、チャートからデータを削除しません。データセットとデータ –
私の回答がうまくいけば教えてください - 回答があればそれをマークしてください – mhz