如何将每种颜色应用于每个数据集答案

【问题标题】：How to apply each color to each dataset如何将每种颜色应用于每个数据集
【发布时间】：2019-04-30 16:40:06
【问题描述】：

如果数据集不是动态的，或者是静态的，我们可以根据自己的意愿在 chart.js 库中应用单独的颜色

var sub1= {
    label: 'sub1',
    data: sub1-data,
    backgroundColor: '#3498db'
};
var girlsData = {
    label: 'sub2',
    data: sub2-data,
    backgroundColor: '#16a085'
};

但是数据集是从 JSON 格式的 ajax 生成的。

无论有多少数据集，如何将每种颜色分配给每个标签？所以我在定义变量时应用了背景颜色。它显示在图表中，但不显示标签名称

backgroundColor: ['red', 'blue', 'green', 'yellow', 'cyan'],

它对每个主题只考虑一种颜色。它必须根据图表格式区分每个主题，不是吗？如图所示，如何将每个主题颜色分配给标签

var data = [{"0":"Nepali","1":"4","sub":"Nepali","gpa":"4"},{"0":"English","1":"3","sub":"English","gpa":"3"},{"0":"Math","1":"3","sub":"Math","gpa":"3"},{"0":"Science","1":"2","sub":"Science","gpa":"2"},{"0":"Social_Studies","1":"5","sub":"Social_Studies","gpa":"5"}]

window.onload=function(){
    var sub = [];
    var gpa = [];

    for(var i in data) {
      sub.push(data[i].sub);
      gpa.push(data[i].gpa);
    }
    var densityCanvas = document.getElementById('student');
    var subData = {
      label: sub,
      data: gpa,
        backgroundColor: ['red', 'blue', 'green', 'yellow', 'cyan'],
    };
    var planetData = {
      labels: sub,
      datasets: [subData]
    };
    var chartOptions = {
      title: {
        display: true,
        text: 'GPA Mark Figure'
      },
      scales: {
        yAxes: [{
          ticks: {
            fixedStepSize: 1,
            beginAtZero: true
          }
        }],
      },
    };
    var barChart = new Chart(densityCanvas, {
      type: 'bar',
      data: planetData,
      options: chartOptions
    });
}

<html>
  <head>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js'></script>
  </head>
  <body>
    	<canvas id='student'></canvas>
  </body>
</html>

【问题讨论】：

标签： javascript charts chart.js

【解决方案1】：

不要只设置一个数据集，而是为每个不同的数据使用一个数据集（尼泊尔语，...），这种实现的缺点是您将丢失 x 标签。

var data = [{"0":"Nepali","1":"4","sub":"Nepali","gpa":"4"},{"0":"English","1":"3","sub":"English","gpa":"3"},{"0":"Math","1":"3","sub":"Math","gpa":"3"},{"0":"Science","1":"2","sub":"Science","gpa":"2"},{"0":"Social_Studies","1":"5","sub":"Social_Studies","gpa":"5"}]

window.onload = function() {
  var subData = [];
  var colors = ['red', 'blue', 'green', 'yellow', 'cyan'];

  for (var i in data) {
    subData.push({
      label: data[i].sub,
      backgroundColor: colors[i],
      data: [data[i].gpa]
    });
  }

  var densityCanvas = document.getElementById('student');

  var planetData = {
    labels: [''],
    datasets: subData
  };
  var chartOptions = {
    title: {
      display: true,
      text: 'GPA Mark Figure'
    },
    scales: {
      yAxes: [{
        ticks: {
          fixedStepSize: 1,
          beginAtZero: true
        }
      }],
    },
  };
  var barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: planetData,
    options: chartOptions
  });
}

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js'></script>
<canvas id='student'></canvas>

【讨论】：