问题：

如何在ChartNew.js中更新饼图？

白嘉志

2023-03-14

嗨，我正在使用chartnewjs。我想用动画更新饼图。我使用的折线图与实时更新。updateChart（ctx， data， config， true， true）方法工作正常。我已经尝试了同样的饼图，但图表没有更新。

然后我像每次刷新一样尝试创建新图表（document.getElementById（“peak_session”）.getContext（“2d”））.Pie（数据，选项）它工作正常，饼图动画也开始工作，我正在从DOM中移除画布并重新创建，但浏览器内存不断增加。

然后我尝试创建var ctx1=new Chart（document.getElementById（“peak_session”）.getContext（“2d”）；var ctx2=新图表（document.getElementById（“当前会话”）.getContext（“2d”）全局。然后在每次刷新中更新上下文（ctx1，ctx2），如ctx1.Pie（peak_数据，选项）；ctx2.Pie（会话数据、选项）其工作正常，但图表未设置动画。当图表具有相同的值时，没有视觉显示。你能不能请任何人帮我用动画更新饼图，并且不要内存泄漏？

共有2个答案

龙弘盛

2023-03-14

在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/.

钱卓君

2023-03-14

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

将上下文保存到变量中，如下所示：

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)

类似资料：

使用新的data.json更新d3饼图

问题内容：我有一个动态数据源，它经常在浏览器中创建一个新的json。我能够使用下面的代码从这个json创建饼图（也在这个小提琴中）此数据经常更新，那么更新饼图的最佳方法是什么？看看这个小提琴。在这里，我还有另一个名为data2的json。我怎样才能简单地用data2替换数据并使饼动画化/更新？注意：在某些更新中，值可能== 0 问题答案：我已经创建了一个有效的版本，并将其发布在这里：h
如何在颤振更新2.8中更新minSdkVersion？

在更新到飘飘 2.8 之前更新到飘飘 2.8 后：如何更新minSdkVersion更高？我在任何地方都找不到目标“flutter.minSdkVersion”变量。
Python-如何在matplotlib中更新图？

问题内容：我在这里重新绘制图形时遇到问题。我允许用户在时间刻度（x轴）中指定单位，然后重新计算并调用此函数plots()。我希望该图仅进行更新，而不是将另一个图附加到该图上。问题答案：你基本上有两个选择：精确执行当前操作，但在重新配置数据之前先致电和。这是最慢但最简单，最可靠的选择。除了重新绘制外，你还可以更新绘图对象的数据。你需要在代码中进行一些更改，但这比每次重新绘制都快得多。但是，
如何在NPM中更新devDependencies？

问题内容：似乎只是更新其中的软件包，但是。现在您可以通过运行进行安装，但这不适用于有任何想法吗？问题答案：除本地模块外，还要更新package.json，请运行或者，使用同一命令来节省时间您可以通过以下方式查看更新的全部详细信息或与此相关的任何命令
如何在NPM中更新devdependency？

似乎只是更新了
如何在Ubuntu中更新phpMyAdmin？

我有一个旧的phpMyAdmin安装（包含我的培训和工作数据）。我想更新到最新版本，我想在更新时保护我的数据安全。有什么方法可以通过在终端上运行一些命令来实现吗？如果我卸载phpMyAdmin，我的数据会被删除吗？

如何在ChartNew.js中更新饼图？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档