Chart.js replace all data(Chart.js 替换所有数据)
问题描述
我遇到了 Chart.js 的问题.
im having a issue with Chart.js.
首先,我设置了一个数据,然后当一个参数发生变化时,我想重新绑定整个图表.这项工作,但它就像旧数据仍然落后于新数据的图表.
Firts, I set a data, and then when a parameter change, I want rebind the entire chart. This work, but its like the chart with the old data still behind the new one.
第一 ->
chart.Line(data, options);
在一个事件中->
chart.Line(newdata, options);
我看到了这个解决方案chart.js 加载全新数据
但我不喜欢这种方式.我在角度指令上下文中,所以这不是最好的方法.
but I dont like this way. Im in a angular directive context, so it's not the best aproach.
我试过没有结果
.update()、.removeData()、.clear()、.destroy() 等
.update( ), .removeData( ), .clear(), .destroy(), etc
这是我当前的指令
http://plnkr.co/edit/qn2UUyznonKm6zgEi8FW?p=catalogue
有什么想法吗?
推荐答案
您正在创建一个新图表,这就是为什么您最终会在新图表后面使用旧图表.
You are creating a new chart, that's why you end up with the old chart behind the new one.
我使用过的一个简单选项:从您用于图表的画布中删除旧图表:
One simple option that I've used: Remove the old chart from the canvas that you are using for the chart:
$('#canvas').replaceWith('<canvas id="canvas"></canvas>');
现在在同一画布中使用新数据创建图表
And now create the chart with the new data in the same canvas
var ctxChart = document.getElementById("canvas").getContext("2d");
window.myChart = new Chart(ctxChart).Line(newdata, options);
希望对你有帮助!
这篇关于Chart.js 替换所有数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:Chart.js 替换所有数据
基础教程推荐
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01