添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

Welcome to Support!

Search for an answer or ask a question of the zone or Customer Support.

Need help? Dismiss Show All Questions sorted by Date Posted

Show

sorted by

Cristian White Cristian White

window.Chart is not a constructor - error in LWC

I created a LWC chart and for whatever reason I have this error.. but only for some records and I don't know why.
import { api, LightningElement, track } from 'lwc'; import chartJS from '@salesforce/resourceUrl/chart'; import { loadScript } from 'lightning/platformResourceLoader'; import getChartDetail from '@salesforce/apex/RenderChart.getChartDetail'; import { ShowToastEvent } from "lightning/platformShowToastEvent"; export default class myRadarChart extends LightningElement { @api recordId; @track chartData = []; @track chartLabel = []; getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; return color; connectedCallback(){ loadScript(this, chartJS + "/Chart.min.js") .then(() => { .catch((error) => { console.log("Error:", error); getChartDetail({ oppId : this.recordId }).then(result => { var tempresult = JSON.parse(JSON.stringify(result)); this.chartLabel = ["Power","Collaborate","CRTA","Pain","Value","Vision"]; this.chartData = []; for(let temp of tempresult){ let color = this.getRandomColor(); let tempdata = []; tempdata.push(temp.Power_no_concat__c); tempdata.push(temp.Collaborate_no_concat__c); tempdata.push(temp.Compelling_Reason_to_Act_CRTA_no_concat__c); tempdata.push(temp.Pain_no_concat__c); tempdata.push(temp.Value_no_concat__c); tempdata.push(temp.Vision_no_concat__c); let chartMap = { label: temp.Name, borderColor: color, fill: false, pointHoverBackgroundColor: color, backgroundColor: "rgba(255,255,255, 0)", data: tempdata this.chartData.push(chartMap); this.callRadarChart(); }).catch(error => { console.error('Error in RenderChart.getChartDetail' + error); this.dispatchEvent(new ShowToastEvent({ title: "Error", message: error, variant: "error", mode: "dismissable" callRadarChart(){ let config = { type: 'radar', data: { labels: this.chartLabel, datasets: this.chartData options:{ legend: { display: true, position: 'right', align: 'center', labels: { usePointStyle: true, this.insertToDOM("div.radarChart",config); insertToDOM(divclass,config) { const canvas = document.createElement("canvas"); const chartNode = this.template.querySelector(divclass); chartNode.innerHTML = ""; chartNode.appendChild(canvas); const ctx = canvas.getContext("2d"); this.chart = new window.Chart(ctx, config);


apex class:

public with sharing class RenderChart { @AuraEnabled(cacheable=true) public static List<Sales_Check__c> getChartDetail(String oppId) { Map<String,Decimal> mapnumberfields = new Map<String,Decimal>(); List<Sales_Check__c> salesCheckList = [SELECT Id, Name,Collaborate_no_concat__c, Compelling_Reason_to_Act_CRTA_no_concat__c, Pain_no_concat__c, Value_no_concat__c, Vision_no_concat__c, Power_no_concat__c FROM Sales_Check__c Where Opportunity__c =:oppId]; return salesCheckList;

This is the error i'm getting it:

Why i'm getting this error?

Swetha Swetha (Salesforce Developers)
HI Cristian,
You ask seems similar to https://stackoverflow.com/questions/41967063/uncaught-typeerror-chart-is-not-a-constructor-when-using-chart-js

https://salesforce.stackexchange.com/questions/286581/while-creating-chart-in-lwc-using-chart-js-getting-error

Can you change the Script as suggested in the post to see if it fixes the issue?

Hope this helps you. Please mark this answer as best so that others facing the same issue will find this information useful. Thank you
Various trademarks held by their respective owners. Salesforce.com, inc. Salesforce Tower, 415 Mission Street, 3rd Floor, San Francisco, CA 94105, United States