相同数据集的数据在chartjs中没有相同的颜色答案

【问题标题】：Data of same dataset don't have the same color in chartjs相同数据集的数据在chartjs中没有相同的颜色
【发布时间】：2017-12-17 19:13:36
【问题描述】：

在上图中，您可以看到我有 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 函数。在该函数中，我们将从 JSON 中取出正确的部分以推送到所有数据集的数据中（因此 nieuweData() 中的 for 循环）。

什么可能导致图表没有为第二个数据提供与数据集相同的颜色？顺便说一句，我知道代码很乱，有些东西可能很奇怪，比如 jQuery.inArray() -> 无法正常工作并且仍在代码中

【问题讨论】：

哦，是的，我弹出每个数据和数据集，因为我发现 .destroy() 并没有真正从图表中删除数据，这意味着如果我调用 getChartdata 函数，它将复制数据集和数据
如果我的回答有效，请告诉我 - 如果有效，请将其标记为已回答

标签： javascript chart.js bar-chart

【解决方案1】：

因为你在打电话

getRandomColor()

尝试将您的 nieuweDataSet 函数更改为：

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

【讨论】：

如果我删除 randomColor() 那么数据集将没有颜色，默认一切为灰色。那不是我需要的。我目前正在重写代码，看看是否有帮助。
我确实放了一个静态颜色，这似乎可以解决它。然后我注意到了，我输入的静态颜色作为字符串输入，但是我用随机颜色将它作为数组输入，所以我认为它只是想转到数组中的下一个颜色，它是空的，所以它默认变灰。

【解决方案2】：

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

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

【讨论】：