jQuery canvasjs пончик диаграмма в реальном времени получить данные - PullRequest
Новая
       126

jQuery canvasjs пончик диаграмма в реальном времени получить данные

0 голосов
/ 09 ноября 2018

Я использую Кольцевая диаграмма

И извлекаю данные из базы данных через 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 элемента.

enter image description here

enter image description here

Моя цель - Кольцевая диаграмма всегда будет в реальном временичтобы получить данные.

Мой вопрос, как предотвратить так много повторяющихся диаграмм?

enter image description here

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Удалить и заново создать контейнер с диаграммой (CANVAS) каждый раз 

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

        $.getJSON("data.php", function(result)
        {
0 голосов
/ 09 ноября 2018

Сначала вы должны очистить массив dataPoints, когда получите результат, а затем выполнить его итерацию для заполнения.

Попробуйте что-то вроде; 

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

Пример; https://jsfiddle.net/yumn325w/

...