【发布时间】：2023-02-25 03:33:44
【问题描述】：
我在 salesforce 中使用 LwC 和 ChartJS 版本 v2.8.0 构建了简单的条形图，所以现在我尝试使用 chartjs-plugin-datalabels v1.0.0 插件在每个条形图上显示数据值。我已经按照下面的代码加载了这个插件，并按照 plugin documentation 中指定的方式注册了插件，但是数据值没有显示在每个条上。
谁能指出我在这里错过了什么？那会很有帮助。
这是LwC代码：
import { LightningElement,api, wire, track } from 'lwc';
import chartjs from '@salesforce/resourceUrl/chartjs_v280';
import ChartDataLabels from '@salesforce/resourceUrl/ChartjsPluginDataLabels';
import { loadScript } from 'lightning/platformResourceLoader';
export default class ChartDemocmp extends LightningElement {
//chart;
isChartJsInitialized;
chartConfiguration;
renderedCallback() {
Promise.all([
loadScript(this, chartjs),
loadScript(this, ChartDataLabels)
])
.then(()=>{
console.log('Loaded');
//this.isChartJsInitialized = true;
if(this.chart){
this.chart.destroy();//destory the chart once data is updated to show the new chart
}
const ctx = this.template.querySelector("canvas.barChart").getContext('2d');
//Chart.register(ChartDataLabels);
//chartjs.plugins.register(ChartDataLabels);
Chart.plugins.register(ChartDataLabels);
this.chart = new Chart(ctx,{
type: 'bar',
data: {
labels: ["data1","data2","data3","data4","data5","data6","data7"],
datasets: [
{
label: 'dataset',
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
backgroundColor: "blue",
data: [65, 59, 80, 81, 56, 55, 40],
},
],
},
// plugins: [ChartDataLabels],
options: {
resposive:true,
plugins: {
datalabels: {
color: "black",
labels: {
title: {
font: {
weight: "bold"
}
}
}
}
}
}
});
})
.catch(error => {
console.log('error chart--> '+JSON.stringify(error));
});
}
}
这是 salesforce 中条形图的屏幕截图，其中每个条形图上都没有显示值：
【问题讨论】：
标签： javascript chart.js salesforce-lightning lwc