javascript - 如何使用 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

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

Controller :

$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 传递到 View 文件。

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

尝试一下，如果有任何问题请告诉我。

编码愉快!