[英]How to make a pie chart froma field in the database?
I have 3 categories in this table field, the categories are "not yet, currently, done". 我在这个表字段中有3个类别,类别是“尚未,当前,已完成”。
I want to make a pie chart. 我想制作一个饼图。
This is my model: 这是我的模特:
public function select_by_status() {
$sql = "SELECT COUNT(status_laporan) AS jml FROM tp4d GROUP BY status_laporan ORDER BY jml";
$data = $this->db->query($sql);
return $data->row();
}
this my controller to show in the pie chart, 这个我的控制器显示在饼图中,
//untuk statistik laporan
$laporan = $this->M_laporan->select_all();
$index = 0;
foreach ($laporan as $value) {
$color = '#' .$rand[rand(0,15)] .$rand[rand(0,15)] .$rand[rand(0,15)] .$rand[rand(0,15)] .$rand[rand(0,15)] .$rand[rand(0,15)];
$laporan_status = $this->M_laporan->select_by_status();
$data_laporan[$index]['value'] = $laporan_status->jml;
$data_laporan[$index]['color'] = $color;
$data_laporan[$index]['highlight'] = $color;
$data_laporan[$index]['label'] = $value->status_laporan;
$index++;
}
$data['data_laporan'] = json_encode($data_laporan);
This is my view: 这是我的看法:
<div class="col-lg-6 col-xs-12">
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-briefcase"></i>
<h3 class="box-title">Statistik <small>Data Status Laporan</small></h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<canvas id="data-laporan" style="height:250px"></canvas>
</div>
</div>
</div>
</div>
and this is my script for the pie chart: 这是饼图的脚本:
var pieChartCanvas = $("#data-laporan").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = <?php echo $data_laporan; ?>;
var pieOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
percentageInnerCutout: 50,
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
responsive: true,
maintainAspectRatio: true,
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
pieChart.Doughnut(PieData, pieOptions);
The problem is that in every part of the chart that is displayed, all the contents are the same, in my database that has a status there are no 2 records while completing 1 record but on the pie chart it looks the same, all like this: 问题是,在显示的图表的每个部分中,所有内容都是相同的,在我的数据库中,状态在完成1条记录时没有2条记录,但在饼图上看起来相同,都是这样的:
How can the statistics be the same as the data in the database? 统计数据如何与数据库中的数据相同?
I think the data should be an object in JSON format. 我认为数据应该是JSON格式的对象。
You can encode an object to JSON using json_encode($your_object)
, then pass it onto the JavaScript. 您可以使用
json_encode($your_object)
将对象编码为JSON,然后将其传递给JavaScript。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.