jQuery canvasjs 圆环图实时检索数据答案

【问题标题】：jQuery canvasjs donut chart realtime retrieve datajQuery canvasjs 圆环图实时检索数据
【发布时间】：2018-11-09 09:30:27
【问题描述】：

我正在使用Donut Chart

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

我的目的是甜甜圈图将始终实时获取数据。

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

【问题讨论】：

“GROUP BY”子句应该可以防止这种情况发生。我建议调试您的查询，看看为什么它不起作用
查询运行良好。我尝试了 TOAD，它显示了 4 个项目。顺便说一句，我在 JS 函数上使用 setInterval 每秒检索一次
这本身就是个坏主意。如果您希望 UI 与服务器上的数据保持同步，请使用 WebSockets 或服务器发送事件。如果您必须使用轮询，请链接请求而不是使用间隔，因为后者可能会导致请求备份并淹没您的服务器。

标签： javascript jquery charts canvasjs

【解决方案1】：

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

试试类似的东西；

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

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

【讨论】：

@HiDayurieDave 尝试在添加数据之前清空图表，而不是之后。
@Neil 你是说外面$.getJSON("data.php", function(result) 吗？
@HiDayurieDave 不，我的意思是按照 Umur 的建议。
@Neil 刚刚试了一下，已经修复，但是如果有新数据，图表不会自动更新
@HiDayurieDave 仅仅因为您没有看到数据的变化并不意味着它没有被更新。检查浏览器的网络选项卡。如果您看到常规请求，那么它很可能正在更新。

【解决方案2】：

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

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

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

【讨论】：