lightning之chart.js canvas重构解决办法

最新推荐文章于 2025-07-11 10:18:12 发布

原创最新推荐文章于 2025-07-11 10:18:12 发布 · 585 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#lighting #chart

Lightning Component 入门专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在前端页面中动态创建和更新图表的方法。通过使用jQuery选择器删除旧的canvas元素并重新创建新的canvas元素来实现图表的更新。文中还提到了提示信息(tooltips)和图例(legend)的相关配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码：

</div>

新建canvas：

var BubbleElement = $("#bubblechart");
var BubbleChart = new Chart(BubbleElement, {
type: 'bar',
data: {},

options:{}

});

tooltips:提示信息

legend：label

重建canvas：

clearCharts : function(component, event){
var canvas = $("canvas").remove();
$("#chartparent").append('<canvas id="linechart" height="50"></canvas>');
$("#chartparent").append('<canvas id="bubblechart" height="10"></canvas>');
$("#chartparent").append('<canvas id="barchart" height="50"></canvas>');
}

利用标签选择器删除所有的canvas，然后再新建所需要的canvas。之后再调用画图函数进行chart重构。

helper.generateChart(component,event,userId);