Как сделать бары разных цветов в Chart.js с данными CSV? - PullRequest
Новая
       27

Как сделать бары разных цветов в Chart.js с данными CSV?

1 голос
/ 25 июня 2019


Итак, я пытаюсь построить график импортированных данных CSV на гистограмме.Я хочу, чтобы каждый столбец на графике соответствовал разному цвету с соответствующими надписями вверху.Но когда я пытаюсь назначить определенные цвета для каждого столбца, он меняет только первый столбец каждого раздела.

график

Вот мой код для графика: 

var ctx3 = document.getElementById("chart3");
var chart3 = new Chart(ctx3, {
        type: 'bar',
        plugins: [ChartDataSource],
        data: {
            datasets: [{
                backgroundColor: [
                    'rgb(19, 82, 150)',
                    'rgb(196, 230, 255)',
                    'rgb(153, 207, 247)',
                    'rgb(103, 172, 224)',
                    'rgb(19, 82, 150)',
                    'rgb(196, 230, 255)',
                ],
                borderColor: [
                    'transparent',
                    'transparent',
                    'transparent',
                    'transparent',
                    'transparent',
                    'transparent'
                ]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            },
            layout: {
                padding: {
                    left: 50,
                    right: 50,
                    top: 50,
                    bottom: 50
                }
            },
            plugins: {
                datasource: {
                    url: 'builddata.csv'
                }
            }
        }
    });

1 Ответ

1 голос
/ 25 июня 2019

Данные, которые в наборе данных должны быть массивом объектов, каждый из которых имеет свойства, учитывают следующее: 

var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'bar',
  plugins: [ChartDataSource],
  options: {
    plugins: {
      datasource: {
        url: 'https://nagix.github.io/chartjs-plugin-datasource/samples/sample-dataset.xlsx'
      }
    }
  },
  data: {
    datasets: [{
        backgroundColor: 'rgb(19, 82, 150)',
        borderColor: 'transparent'
      },
      {
        backgroundColor: 'rgb(196, 230, 255)',
        borderColor: 'transparent'
      }
    ]
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
<canvas id="chart1" style="display: block; width: 580px; height: 290px;" width="580" height="290"></canvas>
...