gpt4 book ai didi

javascript - 动态更新chartJs中的图表

转载 作者:行者123 更新时间:2023-12-02 14:41:02 24 4
gpt4 key购买 nike

这个问题是这篇文章的延续Dynamically update values of a chartjs chart和示例 http://jsbin.com/yitep/5/edit?html,js,output

我是图表JS的新手,在上面的示例中展示了如何动态更新图表数据。但是,任何人都可以帮助我如何从空白图表开始,然后动态更新。

注意:在Highcharts中是可能的,在chartJS中也是可能的。

最佳答案

编辑 http://www.chartjs.org/docs/

chartjs 库现在是最新且最有用的。使用上面的链接。

我认为您需要做的是下载更新的 Chart.Js 库 ChartNew.js:https://github.com/FVANCOP/ChartNew.js/ 。这个更新的库具有更新功能以及许多其他改进,使事情变得更加容易。您可以使用上面的链接下载 zip 文件,并找到大量优秀的示例文件,这些文件将帮助您解决大多数问题。还有一些非常好的文档:https://github.com/FVANCOP/ChartNew.js/wiki/100.Available_options

我将从上述库中添加一个完整的示例,您可以将其复制并粘贴到 html 文件中,以便准确了解如何创建动态图表。只需看一下并尝试一下示例,直到您开始了解事情是如何工作的。

     <!doctype html>

<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.js'></script>
<SCRIPT src='../Add-ins/format.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 = {
labels : [],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointstrokeColor : "yellow",
xPos : [],
data : [],
title : "2014"
}
]
}

var startWithDataset =1;
var startWithData =1;

var opt = {
animationStartWithDataset : startWithDataset,
animationStartWithData : startWithData,
animation : true,
animationLeftToRight : true,
animationSteps : 20,
animationEasing: "linear",
canvasBorders : true,
canvasBordersWidth : 3,
canvasBordersColor : "black",
graphTitle : "animation With Update",
legend : true,
// inGraphDataShow : true,
annotateDisplay : true,
onAnimationComplete : startUpdate,
graphTitleFontSize: 18,
responsive : true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
fmtXLabel : "fmttime hh:mm:ss",
animationCount: 1,
animationPauseTime : 0,
animationBackward: true


};


function startUpdate(ctx, config, data, tp, count) {
setTimeout(function (){updt(ctx,data,config);}, 1000+Math.random()*500);
// setTimeout(function (){updt(ctx,data,config);}, 1000);
};


function updt(ctx,data,config) {
updtData(data);
config.animationSteps = 50*data.datasets[0].xPos.length;
config.animationStartValue=1-(2/data.datasets[0].xPos.length);
deleteHighLight(ctx,data);
updateChart(ctx,data,config,true,true);
}

function updtData(data) {
var i;

var t=new Date();

var coeff = 1000 ;
var rounded = new Date(Math.round(t.getTime() / coeff) * coeff + coeff);

for(i=0;i<10;i++)
{
var t2 = new Date(rounded - (18-2*i) * 1000);
data.labels[i]=t2;
}

data.xBegin=data.labels[0];
data.xEnd=data.labels[9];


data.datasets[0].xPos[data.datasets[0].xPos.length]=t;
vl=Math.random()*100;
data.datasets[0].data[data.datasets[0].data.length]=vl;



// remove data outside first time;
while(data.datasets[0].xPos[0]<data.labels[0]) {
data.datasets[0].xPos.splice(0,1);
data.datasets[0].data.splice(0,1);
}


}

updtData(mydata);
updtData(mydata);
updtData(mydata);
mydata.datasets[0].xPos[0]=new Date(mydata.datasets[0].xPos[0]-2000);
mydata.datasets[0].xPos[1]=new Date(mydata.datasets[0].xPos[1]-1000);

</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_Line\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>");
window.onload = function() {
var myLine = new Chart(document.getElementById("canvas_Line").getContext("2d")).Line(mydata,opt);

}
</script>
</body>
</html>

提供的代码示例直接取自 GitHub 下载文件夹。他们提供了大量示例来帮助理解文档。

关于javascript - 动态更新chartJs中的图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37016853/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com