如何使用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']。而我只是不能輸入它......希望有人會幫助。

來源

2017-06-06 Adzan Abdul Zabar

考慮你的情況你的代碼將是這樣的：

控制器：

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

試試這個，讓我知道是否有任何問題。

快樂編碼！

來源

2017-06-07 06:50:04

如何使用jQuery製作圖表？

回答

相關問題