jQueryを使ってグラフを作成するには？

Question

Iamは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形式です。ビューファイルに$データを渡す必要があります。

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に保存しています。

これを試して問題がある場合はお知らせください。

ハッピーコーディング！