javascript — круговая диаграмма в php с данными mysql с использованием chart.js

Question

javascript — круговая диаграмма в php с данными mysql с использованием chart.js

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

printf( '<script type="text/javascript" src="extlib/Chart.js"></script>' );
printf( '<script type="text/javascript" src="extlib/jquery-min.js"></script>' );
printf( '<p style="text-align: center;">' );
printf( '<canvas id="mycanvas" width="256" height="256"></canvas>' );
printf( '<script type="text/javascript">' );
?>
var ctx = $("#mycanvas").get(0).getContext("2d");
var piedata = [
{
value:30,
color:"green",
label:"sta1",
labelColor : 'white'
},
{
value:60,
color:"red",
label:"sta1",
labelColor : 'white'
},
{
value:50,
color:"blue"}
]

new Chart(ctx).Pie(piedata);
<?php
printf( '</script>' );

Что я могу сделать для динамического графика. Это значение должно исходить от БД MySQL.
Количество значений данных из БД будет отличаться каждый раз. Каждое значение данных имеет определенные цвета.

С помощью приведенного выше кода метка не видна явно (только при наведении мыши).

Пожалуйста, предложите мне путь.

0

chart.js charts javascript mysql php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Выполните итерацию по вашим данным, полученным из ответа json, и поместите данные в массив

var piedata = [];
$.each(yourJson,function(i,val){
piedata.push({value:val.value,color:val.color,label:val.label,labelColor:val.labelColor  });
});

и затем установите новую диаграмму (ctx) .Pie (piedata);

0