Как обновить круговую диаграмму в ChartNew.js?

Привет Я использую chartnewjs. Я хочу обновить круговую диаграмму с помощью анимации. Я использую линейную диаграмму с обновлением в реальном времени. Метод updateChart (ctx, data, config, true, true) работает нормально. Я пробовал то же самое для круговой диаграммы, но диаграмма не обновляется.Как обновить круговую диаграмму в ChartNew.js?

Тогда я пробовал, как каждое обновление, создавая new Chart(document.getElementById("peak_session").getContext("2d")).Pie(data,options), он работает отлично, а анимация круговой диаграммы также работает, я удаляю холст из DOM и воссоздавая, но память браузера продолжает расти.

Затем я попытался создать var ctx1 = new Chart(document.getElementById("peak_session").getContext("2d")); var ctx2 = new Chart(document.getElementById("current_session").getContext("2d")); глобально. Затем обновляем контекст (ctx1, ctx2) в каждом обновлении, например ctx1.Pie(peak_data,options); ctx2.Pie(session_data,options); Его работа прекрасна, но диаграмма не анимируется. На графике нет одинаковых значений. Не могли бы вы помочь кому-нибудь помочь обновить круговую диаграмму с анимацией и без утечки памяти?

источник

2016-03-15 Suresh Somasundaram

Я могу обновить круговые диаграммы просто отлично. Возможно, попробуйте сохранить только ваши экземпляры контекстов.

Сохраните контексты переменных следующим образом:

var ctx1 = document.getElementById('peak-session').getContext('2d'); 
var ctx2 = document.getElementById('current-session').getContext('2d');

Создать свои графики ...

new Chart(ctx1).Pie(peak_data, options); 
new Chart(ctx2).Pie(session_data, options);

Теперь вы можете использовать функцию updateChart в ChartNew в:

updateChart(ctx1, peak_data, options, true) 
updateChart(ctx2, peak_data, options, true)

источник

2016-04-07 14:19:29

Там, кажется, чтобы быть довольно близким примером в папке файла GitHub ChartNew.js.

Похоже, что приведенный пример с обновленной круговой диаграммой в файлах библиотеки ChartNew.Js показывает, что они обновляют массив данных, а затем вызывают функцию updateChart. Я не совсем уверен, что вы делаете по-другому, но вы можете скопировать следующий пример в новый файл Html, используя блокнот или что угодно, сохранить его, а затем открыть, чтобы увидеть, как должна работать функция обновления.

<!doctype html> 

<!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT src='../ChartNew.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 = [ 
    { 
     value : 30, 
     color: "#D97041", 
     title : "data1", 
    }, 
    { 
     value : 90, 
     color: "#C7604C", 
     title : "data2" 
    }, 
    { 
     value : 24, 
     color: "#21323D", 
     title : "data3" 
    }, 
    { 
     value : 58, 
     color: "#9D9B7F", 
     title : "data4" 
    }, 
    { 
     value : 82, 
     color: "#7D4F6D", 
     title : "data5" 
    }, 
    { 
     value : 8, 
     color: "#584A5E", 
     title : "data6" 
    } 
] 


var opt = { 
     animation : true, 
     canvasBorders : true, 

     canvasBordersWidth : 3, 
     canvasBordersColor : "black", 
     graphTitle : "animation With Update", 
     inGraphDataShow : true, 
     inGraphDataTmpl: "<%=v2%>", 
     onAnimationComplete : startUpdate, 
     graphTitleFontSize: 18 
}; 


function startUpdate(ctx, config, data, tp, count) { 
console.log("onAnimationComplete Function executed"); 
}; 


function updt(ctx,data,config) { 
    updtData(data); 
    updateChart(ctx,data,config,true,true); 
    setTimeout(function(){updt(ctx,data,config);}, 5000); 
} 

function updtData(data) { 
    var i; 
    for(i=0;i<data.length-1;i++) data[i].value=data[i+1].value; 
    data[data.length-1].value=Math.floor(Math.random()*50); 
} 


</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_Pie\" height=\""+defCanvasHeight+"\" width=\""+defCanvasWidth+"\"></canvas>"); 
window.onload = function() { 
    var myLine = new Chart(document.getElementById("canvas_Pie").getContext("2d")).Pie(mydata,opt); 
    setTimeout(function(){updt(document.getElementById("canvas_Pie").getContext("2d"),mydata,opt);}, 5000); 

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

Этот пример обновляет график новыми случайными данными каждые несколько секунд. Практически вся логика обновления, кажется, в функции:

function updt(ctx,data,config) { 
     updtData(data); 
     updateChart(ctx,data,config,true,true); 
     setTimeout(function(){updt(ctx,data,config);}, 5000); 
    }

Я не уверен, если это помогает на всех, но вы можете посмотреть на некоторых других примерах по адресу: https://github.com/FVANCOP/ChartNew.js/.

источник

2016-05-04 19:29:06 MUlferts

Как обновить круговую диаграмму в ChartNew.js?

ответ

Смежные вопросы