laravelのビューからchart.jsへ値を渡したいけど一纏めにされてしまう。

Question

前提・実現したいこと

laravelのこのsales_dataにあるindex.blade.phpというビューで
受け取る値を配列にしまして、
それをpie_chart.jsにわたしてるのですが、
本来円グラフのラベルの要素を「Tシャツ/カットソー」,「スウェット(セット)」,「デニムパンツ」,「パーカー」の4つにしたいのに
「Tシャツ/カットソー,スウェット(セット),デニムパンツ,パーカー」という1つの要素になってしまいます。
どこをどういじれば上手くいきますか？

該当のソースコード

@extends('layouts.app')

@section('content')

    <h3>売上金額</h3>

    <h3>{{ $sales_amount }}</h3>

    <h3>アクセサリー売上金額</h3>

    <h3>{{ $accessories_sales_amount }}</h3>

    <h3>商品別売上ランキング</h3>

    @if (count($categorys) > 0)
        <ul>
            <?php $category_names = array(); ?>
            <?php $category_amounts = array(); ?>
            @foreach ($categorys as $category)
                <li>{{ $category->category_name }}</li>
                <?php $category_names[] = $category->category_name; ?>
                <li>{{ $category->category_total }}</li>
                <?php $category_amounts[] = $category->category_total; ?>
            @endforeach
        </ul>
    @endif

    <canvas id="myPieChart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script type="text/javascript">
        var category_names = '<?php echo implode(",", $category_names) ?>';
    </script>   
    <script type="text/javascript" src="js/pie_chart.js"></script>

@endsection

(function() {
    // alert('sample');
    var ctx = document.getElementById("myPieChart");
    var myPieChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: [category_names],
            datasets: [{
                backgroundColor: [
                "#BB5179",
                "#FAFF67",
                "#BB5179",
                "#FAFF67"
                ],
                data: [10, 20, 30, 40]
            }]
        },
        options: {
            title: {
                display: true,
                text: '種類別売上'
            }
        }
    });
})();

Answer 1

$category_names[] に入れる時点で文字列としてクォート込みにすれば良いかと。

$category_names[] = '"'.$category->category_name.'"';

Answer 2

var category_names = '<?php echo implode(",", $category_names) ?>';

ここ多分文字列になってしまってるので

var category_names = ["<?php echo implode('","', $category_names) ?>"];
または
var category_names = <?php echo json_encode($category_names) ?>;

で

labels: category_names,

かなぁ(JavaScript文法になってるかちょっと自信ないので調整してください)

Comments

[harusyoui]

上手くいきました！！
ありがとうございます！！