如何用jQuery制作图表？

Question

我对jQuery还是什么的都是新手。我使用adminlte2模板作为我的项目仪表板，我使用codeigniter作为我的框架。我想在此基础上使用图表。

$(function () {
  var donutData = [
  {label: "Series1", data: 30, color: "#1a5dad"},
  {label: "Series2", data: 20, color: "#2b6cbc"},
  {label: "Series3", data: 50, color: "#3c7bcb"},
  {label: "Series4", data: 50, color: "#4d8ada"}
];
$.plot("#donut-chart", donutData, {
  series: {
    pie: {
      show: true,
      radius: 1,
      innerRadius: 0.5,
      label: {
        show: true,
        radius: 2 / 3,
        formatter: labelFormatter,
        threshold: 0.1
      }

    }
  },
  legend: {
    show: false
  }
});
/*
 * END DONUT CHART
 */

任务就是，如何将代码中标签和数据转换为变量？我已经有了标签变量：$row‘’productSubgroup‘和数据变量：$row’‘counts’。我就是不能输入...希望有人能帮上忙。

Answer 1

考虑到您的情况，您的代码将如下所示：

控制器:

$chart_data = array();
foreach ($result as $row) {
    $chart_data[] = array(
                                    'label' => $row['productSubgroup'],
                                    'data'  => $row['count'],
                                    'color' => dechex(rand(0x000000, 0xFFFFFF)) //Random Hex color code
                                );
}
$data['chart_data'] = json_encode($chart_data);

说明:此代码将从您的数据存储中获取标签和计数。$result有你的数据。我们正在为图表准备数组并将其存储在$data['chart_data']中，它是json格式的。您必须将$data传递给视图文件。

JS :

$(function () {
    var donutData = <?php echo $chart_data; ?>;
    $.plot("#donut-chart", donutData, {
      series: {
        pie: {
          show: true,
          radius: 1,
          innerRadius: 0.5,
          label: {
            show: true,
            radius: 2 / 3,
            formatter: labelFormatter,
            threshold: 0.1
          }

        }
      },
      legend: {
        show: false
      }
    });
/*
 * END DONUT CHART
 */
});

说明：$chart_data保存图表的详细信息。我们将这个php变量数据存储到donutData中。

试一下，如果有什么问题，请告诉我。

快乐编码！