我的 Chart.js 中缺少颜色，我的数据看起来不错，但没有颜色答案

【问题标题】：Missing colors in my Chart.js, my data looks fine, but no color我的 Chart.js 中缺少颜色，我的数据看起来不错，但没有颜色
【发布时间】：2020-02-19 20:54:34
【问题描述】：

我使用 Chart.js 库制作了我的第一个条形图。我的数据看起来不错，但我不能给我的值一些颜色。

enter image description here

我的函数如下所示：

var $barData = 
{
    type: 'bar',
    labels: ['Super mad', 'Middel', 'Ikke ok', 'Gennemsnit'],
    datasets: 
    [
        {
            label: 'Antal stemmer',
            data: [
            [$arrStemmer[0]], 
            [$arrStemmer[1]], 
            [$arrStemmer[2]], 
            [$Snit_Vaerdi]
            ],

            backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }

    ]
}

// Hent graf initialiserings setup
var $Stemmer = document.getElementById("can_afstemning_graf").getContext("2d");
// Tegn graf, men data fra barData objektet
new Chart($Stemmer).Bar($barData);

我错过了什么？我正在查看文档，它看起来不错：https://www.chartjs.org/docs/latest/。

谢谢，内德

【问题讨论】：

发布一个演示。你是否在画布上添加了任何效果

标签： javascript colors chart.js

【解决方案1】：

您设置的数据不正确。

你应该使用

data: [
    $arrStemmer[0], 
    $arrStemmer[1], 
    $arrStemmer[2], 
    $Snit_Vaerdi
],

代替

data: [
    [$arrStemmer[0]], 
    [$arrStemmer[1]], 
    [$arrStemmer[2]], 
    [$Snit_Vaerdi]
],

【讨论】：

【解决方案2】：

这应该可行。如果$arrStemmer 和$snit_Vaerdi 被填满。

let $stemmer = document.getElementById('can_afstemning_graf').getContext('2d');

let myChart = new Chart($stemmer, {
    type: 'bar',
    data: {
        labels: ['Super mad', 'Middel', 'Ikke ok', 'Gennemsnit'],
        datasets: [{
            label: 'Antal stemmer',
            data: [
                $arrStemmer[0],
                $arrStemmer[1],
                $arrStemmer[2],
                $Snit_Vaerdi
            ],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

【讨论】：