Chartjs背景色多Dataset

Question

我有一个用于 Chartjs 的脚本，例如：

<script type="text/javascript">
    var dataname = @Html.Raw(Json.Serialize(ViewBag.performancename));
    var dataquo = @Html.Raw(Json.Serialize(ViewBag.performancequo));
    var datapo = @Html.Raw(Json.Serialize(ViewBag.performancepo));
    var ctx = document.getElementById('canvasx5');

    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dataname,
            datasets: [{
                label: 'QUO',
                fill: true,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.8)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)'
                ],
                borderWidth: 1,
                data: dataquo
            }
            ,
            {
                label: 'PO',
                fill: true,
                backgroundColor: [
                    'rgba(75, 192, 192, 0.8)'
                ],
                borderColor: [
                    'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 1,
                data: datapo
            }]
        },
        borderWidth: 1,
        options: {
            legend: {
                display: true,
            }
            ,
            scales: {
                xAxes: [{
                    stacked: false,
                    barPercentage: 0.8,
                    gridLines: {
                        offsetGridLines: true
                    }
                }],
                yAxes: [{
                    stacked: false,
                    ticks: {
                        beginAtZero: true,
                        stepSize: 2,
                        min: 0
                    }
                }]
            }
        }
    });
</script>

结果类似于：

每个 var 的值是：

dataname: ['Arif','Choirul','Rexy']
dataquo: [2,2,1]
datapo: [0,0,3]

他们在 Array 结果上。

为什么第二个和第三个标签显示的颜色不同？我的脚本有问题吗？需要帮助和建议。

谢谢。

Answer 1

在 V2 中 Chart.js 不支持数组颜色的自动翻转，因此如果您的数组比数据长度更短，它将回退到剩余数据条目的默认颜色。

您有 3 种修复方法：

删除方括号，使其成为普通颜色（参见下面的示例）
提供一个充满颜色的数组，其长度与您的数据数组相同
更新到 V3，虽然有一些主要的制动变化，所以如果您想这样做，请阅读 migration guide 以便您可以正确更改代码

<body>
  <canvas id="canvasx5" width="100" height="100"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script type="text/javascript">
  var dataname = ['Arif', 'Choirul', 'Rexy'];
  var dataquo = [2, 2, 1];
  var datapo = [0, 0, 3];
  var ctx = document.getElementById('canvasx5');

  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: dataname,
      datasets: [{
          label: 'QUO',
          fill: true,
          backgroundColor: 'rgba(255, 99, 132, 0.8)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1,
          data: dataquo
        },
        {
          label: 'PO',
          fill: true,
          backgroundColor: 'rgba(75, 192, 192, 0.8)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1,
          data: datapo
        }
      ]
    },
    borderWidth: 1,
    options: {
      legend: {
        display: true,
      },
      scales: {
        xAxes: [{
          stacked: false,
          barPercentage: 0.8,
          gridLines: {
            offsetGridLines: true
          }
        }],
        yAxes: [{
          stacked: false,
          ticks: {
            beginAtZero: true,
            stepSize: 2,
            min: 0
          }
        }]
      }
    }
  });
</script>

Chartjs背景色多Dataset

Chartjs background color multiple Dataset

javascript

linq

jquery

razor

chart.js