使用chart.js在php中使用mysql数据的饼图

I wish to add pie chart using charts.js in my project. I searched and found some code for simple chart. Part of my code for chart is below:

我想在我的项目中使用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>' );

What can I do for dynamic chart.That is the value should come from MySQL DB. Number of data value from DB will differ every time.Each data value has specific colors.

我能为动态图表做些什么。这个值应该来自MySQL DB。来自DB的数据值每次都不同。每个数据值都有特定的颜色。

With the above code the label is not visible explicitly(only on mouse over).

使用上面的代码,标签不会显式显示(仅在鼠标悬停时)。

Please suggest me the way.

请指教我的方式。

1 个解决方案

#1

Iterate over your data coming from json response and push the data in an Array

迭代来自json响应的数据并将数据推送到数组中

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

and then set new Chart(ctx).Pie(piedata);

然后设置新的图表(ctx).Pie(piedata);

#1