диаграмма. js: не все точки используют определенные цвета - PullRequest
Новая
       78

диаграмма. js: не все точки используют определенные цвета

0 голосов
/ 03 мая 2020

Я делаю линейный график (с диаграммой. js), который я определил аналогично, как показано ниже 

var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
                datasets: [{
                    label: 'Sales Last Week',
                    data: [12, 17, 7, 17, 23, 18, 38],
                    backgroundColor: [
                        'rgba(1, 161, 216, 0.2)'
                    ],
                    borderColor: [
                        'rgba(1, 161, 216, 1)'
                    ],
                    borderWidth: 1
                },
                {
                    label: 'Sales This Week',
                    data: ['8', 17, 3, 17, 50, 10, 49],
                    backgroundColor: [
                        'rgba(1, 216, 128, 0.2)'
                    ],
                    borderColor: [
                        'rgba(1, 216, 128, 1)'
                    ],
                    borderWidth: 1
                }
                ]
            }
        });

По какой-то причине только точки в x = 0 (первые значения в набор данных) отображает цвета, которые я определил, остальные отображают серый цвет по умолчанию. Обратите внимание на серый цвет во всех точках, кроме точек с x = 0

enter image description here

Есть Я что-то пропустил?

1 Ответ

0 голосов
/ 03 мая 2020

Вы не должны определять свои цвета как array. Просто снимите квадратные скобки вокруг них, и это сработает.

Пожалуйста, ознакомьтесь с исправленным кодом ниже. 

new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
        label: 'Sales Last Week',
        data: [12, 17, 7, 17, 23, 18, 38],
        backgroundColor: 'rgba(1, 161, 216, 0.2)',
        borderColor: 'rgba(1, 161, 216, 1)',
        borderWidth: 1
      },
      {
        label: 'Sales This Week',
        data: ['8', 17, 3, 17, 50, 10, 49],
        backgroundColor: 'rgba(1, 216, 128, 0.2)',
        borderColor: 'rgba(1, 216, 128, 1)',
        borderWidth: 1
      }
    ]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
...