Как применить каждый цвет к каждому набору данных - PullRequest
Новая
       3

Как применить каждый цвет к каждому набору данных

0 голосов
/ 30 апреля 2019

Если набор данных не является динамическим или статичным, мы можем применять индивидуальный цвет по своему усмотрению в библиотеке chart.js 

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

Но набор данных генерируется из ajax в формате JSON.

Независимо от того, сколько там наборов данных, как назначить каждый цвет каждой метке?Поэтому я применил цвет фона при определении переменной.Он отображается на графике, но не отображается для имени ярлыка 

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

enter image description here

. Для каждого объекта он рассматривал только один цвет.Он должен различать каждый предмет согласно формату диаграммы, не так ли?как я могу назначить каждому цвету предмета метку, как показано на рисунке 

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>

1 Ответ

1 голос
/ 02 мая 2019

Вместо того, чтобы устанавливать только один набор данных, используйте один для каждых отдельных данных (непальский, ...), недостатком этой реализации является то, что вы потеряете метку 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>
...