如何在 ChartNew.js 中更新饼图
How to update the Pie chart in ChartNew.js?
嗨,我正在使用chartnewjs。我想用动画更新饼图。我正在使用实时更新的折线图。updateChart(ctx,data,config,true,true)方法工作正常。我已经对饼图尝试了相同的方法,但图表没有更新。
然后我尝试像每次刷新一样创建new Chart(document.getElementById("peak_session").getContext("2d")).Pie(data,options)
它工作正常并且饼图动画也可以工作,我正在从 DOM 中删除画布并重新创建,但浏览器内存不断增加。
然后我尝试在全球范围内创建var ctx1 = new Chart(document.getElementById("peak_session").getContext("2d")); var ctx2 = new Chart(document.getElementById("current_session").getContext("2d"));
。然后在每次刷新中更新上下文(ctx1、ctx2),例如ctx1.Pie(peak_data,options); ctx2.Pie(session_data,options);
它工作正常,但图表没有动画。当图表具有相同的值时,没有可视显示。你能请任何人帮助更新带有动画且没有内存泄漏的饼图吗?
我能够很好地更新饼图。也许尝试只保存上下文的实例。
将上下文保存到变量中,如下所示:
var ctx1 = document.getElementById('peak-session').getContext('2d');
var ctx2 = document.getElementById('current-session').getContext('2d');
创建您的图表...
new Chart(ctx1).Pie(peak_data, options);
new Chart(ctx2).Pie(session_data, options);
现在您可以使用 ChartNew 的 updateChart 函数:
updateChart(ctx1, peak_data, options, true)
updateChart(ctx2, peak_data, options, true)
ChartNew.js文件夹中似乎有一个非常密切相关的例子。
看起来在 ChartNew.js 库文件中提供带有更新饼图的示例显示它们正在更新数据数组,然后调用 updateChart 函数。我不完全确定你在做什么不同,但你应该能够使用记事本或任何你喜欢的东西将以下示例复制到一个新的 Html 文件中,保存它,然后打开它以查看更新功能应该如何工作。
<!doctype html>
<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT>
function setColor(area,data,config,i,j,animPct,value)
{
if(value > 35)return("rgba(220,0,0,"+animPct);
else return("rgba(0,220,0,"+animPct);
}
var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator : ".", roundNumber : "none", graphTitleFontSize: 2 };
defCanvasWidth=600;
defCanvasHeight=300;
var mydata = [
{
value : 30,
color: "#D97041",
title : "data1",
},
{
value : 90,
color: "#C7604C",
title : "data2"
},
{
value : 24,
color: "#21323D",
title : "data3"
},
{
value : 58,
color: "#9D9B7F",
title : "data4"
},
{
value : 82,
color: "#7D4F6D",
title : "data5"
},
{
value : 8,
color: "#584A5E",
title : "data6"
}
]
var opt = {
animation : true,
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "animation With Update",
inGraphDataShow : true,
inGraphDataTmpl: "<%=v2%>",
onAnimationComplete : startUpdate,
graphTitleFontSize: 18
};
function startUpdate(ctx, config, data, tp, count) {
console.log("onAnimationComplete Function executed");
};
function updt(ctx,data,config) {
updtData(data);
updateChart(ctx,data,config,true,true);
setTimeout(function (){updt(ctx,data,config);}, 5000);
}
function updtData(data) {
var i;
for(i=0;i<data.length-1;i++) data[i].value=data[i+1].value;
data[data.length-1].value=Math.floor(Math.random()*50);
}
</SCRIPT>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<head>
<title>Demo ChartNew.js</title>
</head>
<body>
<center>
<FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR>
<script>
document.write("<canvas id='"canvas_Pie'" height='""+defCanvasHeight+"'" width='""+defCanvasWidth+"'"></canvas>");
window.onload = function() {
var myLine = new Chart(document.getElementById("canvas_Pie").getContext("2d")).Pie(mydata,opt);
setTimeout(function (){updt(document.getElementById("canvas_Pie").getContext("2d"),mydata,opt);}, 5000);
}
</script>
</body>
</html>
本示例每隔几秒钟使用新的随机数据更新一次图表。几乎所有的更新逻辑似乎都在函数中:
function updt(ctx,data,config) {
updtData(data);
updateChart(ctx,data,config,true,true);
setTimeout(function (){updt(ctx,data,config);}, 5000);
}
我不确定这是否有帮助,但您可以在 :https://github.com/FVANCOP/ChartNew.js/上查看其他一些示例。
- 有条件更新d3.js力图中节点的最佳方法
- d3.js用按钮更新条形图工具提示
- React js更改状态不会更新组件
- 谷歌地图/Angular JS:地图更新并不总是反映数据,并且可以't删除标记
- 如何让React JS点击处理程序在执行时更新DOM
- 更新从Mysql查询检索到的数据?Node.js节点mysql
- JS在更新面板后重置
- Node.js错误“;ReferenceError:全局未定义“;在从0.10.2更新到0.12.2之后
- 使用PHP更新external.js中的Javascript变量
- Angular JS-文本框未在独立范围内更新
- 在第三次onPageClick事件后,使用twbspagination插件和AJAX更新JS分页
- 基于元素ID更新JS对象
- 持续更新 JS 变量的 HTML 显示
- 更新JS类的属性基于其他属性
- 在angular $scope中更新JS数组
- Jquery .html()似乎没有更新JS代码
- React Native,自动更新.js文件
- 如何通过ajax更新js对象类型变量
- 如何让grunt用户更新JS来引用我们的图像
- 基于本地存储更新JS对象