如何使用jQuery制作图表？

问题描述：

Iam真的很新来jQuery什么的。 Iam使用adminlte2模板作为我的项目仪表板，我使用codeigniter作为我的框架。我想使用基于此的图表。如何使用jQuery制作图表？

$(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']和data：$ row ['counts']。而我只是不能输入它......希望有人会帮助。

答

考虑你的情况你的代码将是这样的：

控制器：

$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格式。您必须将$数据传递给视图文件。

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。

试试这个，让我知道是否有任何问题。

快乐编码！

如何使用jQuery制作图表？

相关推荐