[英]jQuery canvasjs donut chart realtime retrieve data
我正在使用圆环图
并通过PHP从数据库中检索数据。
PHP
$q = oci_parse($c1, "SELECT DESCRIPTION, SUM(QUANTITY) AS TOTALS FROM TEST1
GROUP BY DESCRIPTION");
oci_execute($q);
while($d = oci_fetch_array($q))
{
$description[] = $d['DESCRIPTION'];
$quantity[] = $d['TOTALS'];
$nameAndCode = array();
$nameAndCode['label'] = $d['DESCRIPTION'];
$nameAndCode['y'] = $d['TOTALS'];
$namesArray[] = $nameAndCode;
}
$dataPoints = array(
"dataPoints" => $namesArray
);
echo json_encode($dataPoints);
和JS
var dataPoints = [];
function updateChart()
{
$.getJSON("data.php", function(result)
{
for (var i = 0; i <= result.dataPoints.length - 1; i++)
{
dataPoints.push({
label: result.dataPoints[i].label,
y: parseInt(result.dataPoints[i].y)
});
}
chart.render();
});
}
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type: "doughnut",
innerRadius: "40%",
showInLegend: true,
legendText: "{label}",
indexLabel: "{label}: #percent%",
dataPoints: dataPoints
}]
});
var updateInterval = 1000;
setInterval(function(){
updateChart()
}, updateInterval);
当我尝试运行代码时,圆环图总是会显示很多重复项。 数据仅检索 4 个项目。
我的目的是甜甜圈图将始终实时获取数据。
我的问题,如何防止这么多重复的图表?
当你得到结果时,你应该首先清空 dataPoints 数组,然后你应该遍历它来填充。
尝试类似的东西;
$.getJSON("data.php", function(result)
{
$("#chartContainer").options.data[0].dataPoints = result;
$("#chartContainer").CanvasJSChart().render();
});
每次删除并重新创建图表容器(CANVAS)
function updateChart()
{
document.getElementById("divDonutChart").innerHTML = ' ';
document.getElementById("divDonutChart").innerHTML = '<canvas
id="chartContainer"> </canvas> ';
$.getJSON("data.php", function(result)
{
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.