作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我尝试再次使用 ChartJs 重新加载 Canvas 上的图形时遇到问题。在进行新的搜索时,我将鼠标移到图形上时留下了以前的图形数据。我想知道如何重新启动图表。
函数
function cargar_datos(datasL,dataP,dataR){
var ctx = $("#myChart")
var chart = new Chart(ctx, {
type: 'line',
data:
{
labels: datasL,
datasets:
[{
label: "Rendimiento",
borderColor: 'rgb(255, 99, 132)',
backgroundColor: ['rgba(255,200,200,0)'],
borderWidth: 2,
pointBackgroundColor: "red",
pointBorderColor: "rgba(250,10,10,0.1)",
pointBorderWidth: "10",
pointStyle: "rectRounded",
data:dataP,
},
{
label: "Aplicado",
borderColor: 'rgb(0, 143, 255)',
backgroundColor: ['rgba(112, 171, 219, 0.2)'],
borderWidth: 2,
pointBackgroundColor: "blue",
pointBorderColor: "rgba(144, 140, 174, 0.3)",
pointBorderWidth: "10",
pointStyle: "rectRounded",
data: dataR
}]
},
options: {
tooltips: {
position: 'average',
mode: 'index',
intersect: false,
},
}
});
chart.destroy();
}
Js
$(document).on('click','#Mostrarb',function(){
cargar_datos(labels,rend,porc);
});
html
<div class="box-body">
<canvas id="myChart" width="200" height="35"></canvas>
</div>
最佳答案
那是因为每次调用该函数时,您都在创建一个新的 chart.js 实例,创建一个外部 var 图表:
var chart;
function cargar_datos(datasL,dataP,dataR){
var ctx = $("#myChart")
chart = new Chart(ctx, {
type: 'line',
data:
{
labels: datasL,
datasets:
[{
label: "Rendimiento",
borderColor: 'rgb(255, 99, 132)',
backgroundColor: ['rgba(255,200,200,0)'],
borderWidth: 2,
pointBackgroundColor: "red",
pointBorderColor: "rgba(250,10,10,0.1)",
pointBorderWidth: "10",
pointStyle: "rectRounded",
data:dataP,
},
{
label: "Aplicado",
borderColor: 'rgb(0, 143, 255)',
backgroundColor: ['rgba(112, 171, 219, 0.2)'],
borderWidth: 2,
pointBackgroundColor: "blue",
pointBorderColor: "rgba(144, 140, 174, 0.3)",
pointBorderWidth: "10",
pointStyle: "rectRounded",
data: dataR
}]
},
options: {
tooltips: {
position: 'average',
mode: 'index',
intersect: false,
},
}
});
chart.destroy();
}
关于javascript - 如何重置 Chart.Js 的图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53054911/
我是一名优秀的程序员,十分优秀!