jQuery canvasjs圆环图实时获取数据

Question

并通过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 项。

我的目的是甜甜圈图总是实时获取数据。

我的问题，如何防止这么多重复的图表？

Answer 1

你应该在得到结果时首先清空 dataPoints 数组，然后你应该遍历它来填充。

试试类似的东西；

$.getJSON("data.php", function(result)
    {
        $("#chartContainer").options.data[0].dataPoints = result;
        $("#chartContainer").CanvasJSChart().render();
    });

示例； https://jsfiddle.net/yumn325w/

Answer 2

每次删除并重新创建图表容器(CANVAS)

    function updateChart()
    {
       document.getElementById("divDonutChart").innerHTML = '&nbsp;';
       document.getElementById("divDonutChart").innerHTML = '<canvas 
       id="chartContainer"> </canvas>  ';

        $.getJSON("data.php", function(result)
        {

jQuery canvasjs圆环图实时获取数据

jQuery canvasjs donut chart realtime retrieve data

javascript

jquery

charts

canvasjs