javascript - laravelとjsのある円グラフ

原文 javascript php laravel charts highcharts

データベースから円グラフにデータを表示するという問題に直面しています。この問題について考えている人は誰でも私を助けてください。私はlaravel5とjs(http://www.highcharts.com/demo/pie-basic)を使用しています

異なるカテゴリに属する​​異なるアイテムを含むproductsという名前のテーブルがあり、それらはcategories列にあります。これらのカテゴリと製品の数を円グラフi e product =electronic & number=3,product=clothes & number=2などで表示したい

コントローラー機能

    public function category()
    {
      $data=[];

      // this query select products from "categories" column with count
      $recordsByCategories=\DB::table('products')
                ->select('categories','category_id', \DB::raw('count(*) as totalProducts'))
                ->groupBy('categories')
                ->get();

//I have made array to show data in pie chart accoding to js documentation given in above link
     $data = array_merge_recursive($data, [

         ['name' => "{{$recordsByCategories->categories}}",
         'y' =>  $recordsByCategories[0]->totalProducts,
          ],
        ]);

return view('dashboard.show',compact('data'));


実際のjsはこんな感じ

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});


そして私の見解は

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

 <div id="container" style="width: 80%;min-width: 500px; height: 400px; margin: 0 auto"></div>

<script>
$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
         series: [{
            type: 'pie',
            name: 'Cases',
            data: {!!json_encode($data)!!}, //I made changes here

        }]

    });
});

</script>
答え
{{$data[0]}}

上記のように試してください。
関連記事

javascript - Safari canPlayType()が.oggを「おそらく」とマークし、HTML5 <audio> <source>が再生されない

javascript - HTML5キャンバスのMac OS上のネイティブ関数getImageData()が遅い

javascript - スクロールを使用してブートストラップカルーセルスライドを移動する際のスクロール速度を遅くする方法

javascript - browserifyでbasil.jsを使用するにはどうすればよいですか?

javascript - JavaScript関数のコンテキストが正しくない

javascript - 自動インクリメントされたビルド番号をMeteorアプリに追加しますか?

javascript - 遅延ではなくプロミスを保存するにはどうすればよいですか?

javascript - ファイルのアップロード時の415(サポートされていないメディアタイプ)

java - xPathを指定すると、JavaFX webViewの要素を強調表示することは可能ですか?

javascript - 警告ボックスのスタイルを変更するには?