У меня есть этот график статически, я создаю сервис в PHP и через возвращение с Ajax Я хотел бы обновить данные динамически. (Chart.js Doughnut plugin) Однако я не смог обновить диаграмму, хотя я поместите его внутрь Ajax's Success.
// re-render the chart
myChart.data.labels.push("Post " );
myChart.update();
Мне нужно было обновить 2 значения: 8 000 долларов и еще 500 долларов. Как можно динамически обновить?
var myChart;
// Doughnut with multiple lines of text in the center
//function GerarGrafico(saldoBruto, rendBruto) {
var ctx = document.getElementById('chart1').getContext('2d');
myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [
"Conservative",
"Moderate",
"Aggressive"
],
datasets: [{
backgroundColor: [
"#4FC1E9",
"#FFA500",
"#967ADC"
],
borderColor: "rgba(255,255,255,0.5)",
data: [0.4, 0.9, 0.7],
borderWidth: [0, 0, 0, 0]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
position: 'top',
},
title: {
display: false,
fontSize: 20,
text: 'Multiple lines of text'
},
animation: {
animateScale: true,
animateRotate: true
},
cutoutPercentage: 92,
layout: {
padding: {
bottom: 10
}
},
plugins: {
doughnutlabel: {
labels: [
{
text: ' My investments ',
font: {
size: '18',
family: 'Roboto',
style: 'normal',
weight: '500',
horizontalCenter: "middle",
verticalCenter: "middle"
},
sidePadding: 15,
color: '#161515'
},
{
text: 'Gross Balance',
font: {
size: '12',
family: 'Roboto',
style: 'normal',
weight: 'normal'
},
color: '#979797'
},
{
text: 'U$ 8.000',
font: {
size: '23',
family: 'Roboto',
style: 'normal',
weight: '500'
},
color: '#161515'
},
{
text: '--------------------',
font: {
size: '12',
style: 'normal',
weight: 'normal'
},
color: '#979797'
},
{
text: 'Gross income',
font: {
size: '12',
style: 'normal',
weight: 'normal'
},
color: '#979797'
},
{
text: 'U$ 500',
font: {
size: '15',
style: 'normal',
weight: 'bold'
},
color: '#161515'
}
]
}
}
}
});
//}
</script>