使用 chart.js 的条形图的不同颜色答案

【问题标题】：different colors for bar chart with chart.js使用 chart.js 的条形图的不同颜色
【发布时间】：2021-03-21 23:16:19
【问题描述】：

您好，我的条形图的配色方案有问题。每次有 4 个值。这些值应该有 4 种不同的颜色。您将在附件中找到代码和当前图片。

我尝试了几种着色选项。没有任何效果。

例如，如果我更改以下内容，则条形将全部变灰

背景颜色： [ “红色的”， “绿色”， “蓝色的”， “黑色的”， “黄色”， ],

谢谢！！！！

 public function auswertungBarDiagrammUhrzeiten($daten, $auswertungsKategorien)
    {
        $html = "";

        foreach($daten as $daten_tag_key =>$daten_tag) {

            $labelString = "";
            $datasetString = "";

            $auswertungsKategorien = array_unique($auswertungsKategorien); 
            sort($auswertungsKategorien);  
            
            for ($x = 0; $x < 24; $x++) {
                $labelString .= '"' . $x . '",';
            }

            foreach ($daten_tag as $daten_tag_kategorie_key => $daten_tag_kategorie) {
                $dataString = "";
                for ($x = 0; $x < 24; $x++) {
                    $dataString .= '"' . $daten_tag_kategorie[$x . '_A'] . '",';
                }

                $datasetString .=
                    '{
                      label: "'.$daten_tag_kategorie_key.'",
                       backgroundColor: "red",
                      data: [' . $dataString . '],
                 },';
            }

            $html .= '<canvas id="myBarChartUhrzeiten' . $daten_tag_key . '"></canvas>'     

                . '<script>
                    
                    var ctx = document.getElementById("myBarChartUhrzeiten' . $daten_tag_key                . '").getContext("2d");
                    
                    console.log(ctx);
                    var chart = new Chart(ctx, {
                        // The type of chart we want to create
                        type: "bar",
    
                        // The data for our dataset
                        data:
                        {
                            labels:   [' . $labelString . '],
                            datasets: [' . $datasetString . ']
                        },
                        
                        options:
                        {
                             legend: 
                             {
                                display: false,
                             },
                             
                             plugins: 
                             {
                                datalabels: 
                                {
                                    display: false,
                                },
                             }
                        }
                    });
    
                </script>';

        }
        return $html;
    }

enter image description here

【问题讨论】：

标签： chart.js

【解决方案1】：

您必须确保使用最新版本的库。如果你有这个，你可以使用脚本选项来获得正确的背景颜色，如下所示：

const backgroundColor = ['red', 'blue', 'yellow']
var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: (c) => (backgroundColor[c.dataIndex % backgroundColor.length]),
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

【讨论】：