ChartJS LWC:如何在Lightning Web Components(LwC)salesforce中的图表js条中显示数据值

tzxcd3kk  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(268)

我已经建立了简单的条形图在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中条形图的屏幕截图,其中的值没有显示在每个条形图上:

k4aesqcs

k4aesqcs1#

我认为这个问题取决于缺少的Y轴刻度定义,默认值是ticks.beginAtZero: false。插件默认情况下计算整个条形图上标签的位置(基于数据值),而不是可见条形图上的标签。要强制插件使用可见条形图,您应该使用clamp: true选项。
夹具文档:https://chartjs-plugin-datalabels.netlify.app/guide/positioning.html#clamping
第一个

相关问题