如何使用 jQuery 制作图表？答案

【问题标题】：How to make a charts using jQuery?如何使用 jQuery 制作图表？
【发布时间】：2017-06-06 20:56:58
【问题描述】：

我对 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']。我就是无法输入...希望有人能提供帮助。

【问题讨论】：

标签： javascript php jquery codeigniter charts

【解决方案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。

试试这个，如果有任何问题，请告诉我。

编码愉快！

【讨论】：