带有 laravel 和 js 的饼图

Question

我在将数据从数据库显示到饼图时遇到问题。任何对这个问题有想法的人请帮助我。我正在使用 laravel5 和 js(http://www.highcharts.com/demo/pie-basic)

我有一个名为products 的表，其中包含属于不同类别的不同项目，它们位于categories 列中。我想在饼图中显示这些类别和产品数量 ie 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>

Answer 1

{{$data[0]}}

尝试如上所示。