我已经建立了简单的条形图在salesforce使用LwC与ChartJS版本v2.8.0,所以现在我试图显示数据值在每个酒吧使用chartjs-plugin-datalabels v1.0.0插件.我已经加载了这个插件,如下面的代码和插件文档中指定的插件注册,但数据值没有显示在每个酒吧.
有人能指出我遗漏了什么吗?那会很有帮助的。
下面是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中条形图的屏幕截图,其中的值没有显示在每个条形图上:
1条答案
按热度按时间k4aesqcs1#
我认为这个问题取决于缺少的Y轴刻度定义,默认值是
ticks.beginAtZero: false
。插件默认情况下计算整个条形图上标签的位置(基于数据值),而不是可见条形图上的标签。要强制插件使用可见条形图,您应该使用clamp: true
选项。夹具文档:https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#clamping
第一个