Chartjs背景色多個資料集-有解無憂

我有一個 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>

結果是這樣的：

Chartjs 背景色多個資料集

每個的值var是：

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

他們在Array結果上。

為什么第二個和第三個標簽以不同的顏色出現？我的腳本有問題嗎？需要幫助和建議請。

謝謝你。

uj5u.com熱心網友回復：

在 V2 中，Chart.js 不支持陣列顏色的自動翻轉，因此如果您的陣列由于資料長度而更短，它將回退到剩余資料條目的默認顏色。

您有 3 種修復方法：

洗掉方括號，使其只是正常顏色（參見下面的示例）
提供與資料陣列長度相同的充滿顏色的陣列
更新到 V3，雖然有一些重大的剎車變化，所以如果你想這樣做，請閱讀遷移指南，這樣你就可以正確地更改代碼

<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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/318204.html

標籤：javascript 查询林克剃刀图表.js

上一篇：基于在另一個表中查找的更新

下一篇：InvalidOperationException：無法翻譯LINQ運算式