ChartJS 錯誤返回 chart.myChart 未定義

Question

我正在嘗試設置版本為 v4.1.1 的 ChartJS，但控制台正在返回

未捕獲的類型錯誤：chart.myChart 未定義

知道為什么嗎？

我的代碼看起來像

const ctx = document.getElementById('myChart');
window.chartColors = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(51, 204, 51)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(201, 203, 207)'
        };


var ChartData = new Chart(ctx, {
type: 'line',
data: {
    datasets: [{
    borderWidth: 1,
    data: [1, 2, 3, 4]
    }],
    
},
options: {
      backgroundRules: [{
            backgroundColor: "red",
            yAxisSegement: 40
         },
         {
            backgroundColor: "yellow",
            yAxisSegement: 70
         },
         {
            backgroundColor: "green",
            yAxisSegement: Infinity
         }
      ]
   },
   plugins: [{
      beforeDraw: function(chart) {
         var ctx = chart.chart.ctx;
         var ruleIndex = 0;
         var rules = chart.chart.options.backgroundRules;
         var yaxis = chart.chart.scales["y-axis-0"];
         var xaxis = chart.chart.scales["x-axis-0"];
         var partPercentage = 1 / (yaxis.ticksAsNumbers.length - 1);
         for (var i = yaxis.ticksAsNumbers.length - 1; i > 0; i--) {
            if (yaxis.ticksAsNumbers[i] < rules[ruleIndex].yAxisSegement) {
               ctx.fillStyle = rules[ruleIndex].backgroundColor;
               ctx.fillRect(xaxis.left, yaxis.top + (i - 1) * (yaxis.height * partPercentage), xaxis.width, yaxis.height * partPercentage);
            } else {
               ruleIndex++;
               i++;
            }
         }
      }
   }]
});

我在論壇上嘗試了一些建議，但我真的不知道如何解決這個問題

Answer 1

當您嘗試訪問 object 上未定義的屬性或方法時，通常會拋出錯誤 Uncaught TypeError: chart.myChart is undefined 。 在這種情況下，看起來您正在嘗試訪問圖表 object 上的 myChart 屬性，但圖表 object 是未定義的。

圖表 object 在您的代碼中可能未定義的原因有幾個：

1. getElementById 方法返回 null：getElementById 方法用於獲取對 HTML 中將呈現圖表的 canvas 元素的引用。 如果此方法返回 null，則表示找不到具有指定 ID 的元素。 確保 canvas 元素存在於您的 HTML 中，並且 getElementById 方法中指定的 ID 與 canvas 元素的 ID 匹配。
2. 您正在嘗試在圖表完成呈現之前訪問圖表 object：圖表 object 在圖表完成呈現之前不會創建。 如果您嘗試在圖表完成呈現之前訪問圖表 object，它將是未定義的。 確保您僅在圖表完成呈現后嘗試訪問圖表 object。
3. 您使用的 Chart.js 版本錯誤：您在代碼中使用的 ChartData object 不是 Chart.js 庫的一部分。 確保您使用的是 Chart.js 的正確版本，並且您使用正確的語法在該版本中創建圖表。

我希望這有幫助！