同一数据集的数据在chartjs中的颜色不同

Question

在上面的图片中，您可以看到我有1个数据集和2个不同的东西，我想看到同一个数据集。

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 = '0123456789ABCDEF';
  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一次。在该函数中，我们将从JSON中取出正确的部分以推入所有数据集的数据（因此在nieuweData（）中的for循环）。

什么可能导致图表不给第二个数据与数据集相同的颜色？顺便说一下，我知道代码很乱，有些东西可能很奇怪，就像jQuery.inArray（） - >那样无法正常运行并仍在代码中

Answer 1

因为你在打电话

getRandomColor()

尝试将nieuweDataSet函数更改为：

function nieuweDataSet(naam){
  var newDataset = {
    label: naam,
    borderWidth: 1,
    data: []
  };
  barChartData.datasets.push(newDataset);
  theChart.update();
}

Answer 2

我发现我的错误归功于mhz。他把注意力转向了颜色而不是我添加数据的方式。问题是我将颜色设置为数组而不是字符串，这可能意味着它想要在数组中选择下一个颜色为空，因此它默认为灰色。我通过从原始代码段中删除“[]”来修复它。

function nieuweDataSet(naam){
  var kleur = getRandomColor();
  var newDataset = {
    label: naam,
    backgroundColor:kleur,
    borderColor: kleur,
    borderWidth: 1,
    data: []
  };
  barChartData.datasets.push(newDataset);
  theChart.update();
}