0

加载光环组件时出现以下错误。在组件中使用 Chart.js 插件生成图表。在此处输入图像描述

组件代码：

<aura:component>
<ltng:require scripts="{!$Resource.chart_min_js}" afterScriptsLoaded="{!c.makeVerticalChart}"/>

<div Class="chart-container">
  <canvas aura:id='vericalBarChart'></canvas>
</div>
</aura:component>

组件控制器：

({
makeVerticalChart : function(component, event, helper) {
    const labelsForVerticalBarChart = [
        'January','February','March','April','May','June','July',
        'Aug', 'Sept','Oct','Nov','Dec'
        ];

    const dataForVerticalBarChart = {
        labels: labelsForVerticalBarChart,
        datasets: [{
             label: 'My First dataset',
             backgroundColor:'rgba(255, 99, 132, 0.2)',
             borderColor: 'rgb(255, 99, 132)',
             borderWidth: 1,
             fill: false,
             active: true,
             data: [10, 5, 2, 20, 30, 45, 48, 36, 35, 40, 15, 40]
        }]
    };
    
    const configForVerticalBarChart = {
         type: 'bar',
         data: dataForVerticalBarChart,
         options: {
         responsive: true,
         scales: {
         y: {
              beginAtZero: true
            }
     },
     plugins: {
        tooltip: true
     },
     interaction: {
        mode: 'dataset'
     }
   } 
};
    
    var horizontalCanvas = component.find('vericalBarChart').getElement();
    var ctxForVerticalBarChart = horizontalCanvas.getContext('2d');

    const myChart = new Chart(ctxForVerticalBarChart,
                              configForVerticalBarChart
   );
  }
})

我使用的是 96 版的 Google Chrome 浏览器，它支持 ResizeObserver。请就如何解决该问题提出任何建议。

4

0 回答 0