Question

此表字段中有3个类别，类别为“目前尚未完成”。

我想制作一个饼图。

这是我的模特

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();
    }

这是我的控制器在饼图中显示的

//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);

这是我的观点：

<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>

这是我的饼图脚本：

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);

问题是，在显示的图表的每个部分中，所有内容都是相同的，在我的数据库中，状态为2的记录同时完成1条记录，但是在饼图上看起来是一样的，都这样：

统计信息如何与数据库中的数据相同？

Answer 1

我认为数据应该是JSON格式的对象。

您可以使用json_encode($your_object)将对象编码为JSON，然后将其传递到JavaScript。

如何从数据库中的字段制作饼图？

1 个答案: