如何更新 ChartNew.js 中的饼图？答案

【问题标题】：How to update the Pie chart in ChartNew.js?如何更新 ChartNew.js 中的饼图？
【发布时间】：2016-03-15 06:23:25
【问题描述】：

您好，我正在使用 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); 它工作正常，但图表没有动画。当图表具有相同的值时，没有视觉显示。您能否请任何人帮助更新带有动画且没有内存泄漏的饼图？

【问题讨论】：

标签： javascript chartnew.js

【解决方案1】：

我可以很好地更新饼图。也许尝试只保存上下文的实例。

将你的上下文保存到这样的变量中：

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)

【讨论】：

【解决方案2】：

GitHub 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/。

【讨论】：