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

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

我已经建立了简单的条形图在salesforce使用LwC与ChartJS版本v2.8.0,所以现在我试图显示数据值在每个酒吧使用chartjs-plugin-datalabels v1.0.0插件.我已经加载了这个插件,如下面的代码和插件文档中指定的插件注册,但数据值没有显示在每个酒吧.
有人能指出我遗漏了什么吗?那会很有帮助的。
下面是LwC代码:

  1. import { LightningElement,api, wire, track } from 'lwc';
  2. import chartjs from '@salesforce/resourceUrl/chartjs_v280';
  3. import ChartDataLabels from '@salesforce/resourceUrl/ChartjsPluginDataLabels';
  4. import { loadScript } from 'lightning/platformResourceLoader';
  5. export default class ChartDemocmp extends LightningElement {
  6. //chart;
  7. isChartJsInitialized;
  8. chartConfiguration;
  9. renderedCallback() {
  10. Promise.all([
  11. loadScript(this, chartjs),
  12. loadScript(this, ChartDataLabels)
  13. ])
  14. .then(()=>{
  15. console.log('Loaded');
  16. //this.isChartJsInitialized = true;
  17. if(this.chart){
  18. this.chart.destroy();//destory the chart once data is updated to show the new chart
  19. }
  20. const ctx = this.template.querySelector("canvas.barChart").getContext('2d');
  21. //Chart.register(ChartDataLabels);
  22. //chartjs.plugins.register(ChartDataLabels);
  23. Chart.plugins.register(ChartDataLabels);
  24. this.chart = new Chart(ctx,{
  25. type: 'bar',
  26. data: {
  27. labels: ["data1","data2","data3","data4","data5","data6","data7"],
  28. datasets: [
  29. {
  30. label: 'dataset',
  31. barPercentage: 0.5,
  32. barThickness: 6,
  33. maxBarThickness: 8,
  34. minBarLength: 2,
  35. backgroundColor: "blue",
  36. data: [65, 59, 80, 81, 56, 55, 40],
  37. },
  38. ],
  39. },
  40. // plugins: [ChartDataLabels],
  41. options: {
  42. resposive:true,
  43. plugins: {
  44. datalabels: {
  45. color: "black",
  46. labels: {
  47. title: {
  48. font: {
  49. weight: "bold"
  50. }
  51. }
  52. }
  53. }
  54. }
  55. }
  56. });
  57. })
  58. .catch(error => {
  59. console.log('error chart--> '+JSON.stringify(error));
  60. });
  61. }
  62. }

下面是salesforce中条形图的屏幕截图,其中的值没有显示在每个条形图上:

k4aesqcs

k4aesqcs1#

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

相关问题