chart.jsのdataを動的にする方法

Question

①聞きたいこと
chart.jsのdataの数値をphp側から取得してdataに反映される方法
elementで取得しようとしましたが、どこにelementをプログラムすればいいか分かりません。

②起きている問題
php側から数値を取得できません

③ソースコード

<canvas id="myChart" data-score=<?php print($rubber['price'].','.$rubber['spped']); ?></canvas>

jQuery(function() {
    const config = {
        type: 'radar',
        data: barChartData,
        responsive: true
    }

    const context = jQuery("#myChart")
    const chart = new Chart(context, config)
})

// ----------------------------------------------------------------------
const barChartData = {
    labels: ['スピード', 'スピン', '安定', '価格'],
    datasets: [{
            label: "フォア",
            backgroundColor: "rgba(179,181,198,0.5)",
            data: [$(element).data('score')],
            //dataの数値をPHP側から取得し、反映させたい
        },
        {
            label: "バック",
            backgroundColor: "rgba(255,99,132,0.5)",
            data: [$(element).data('score')]
            //dataの数値をPHP側から取得し、反映させたい
        }
    ]
}

Answer 1

elementで取得しようとしましたが、どこにelementをプログラムすればいいか分かりません。

HTML要素にデータをもたせる必要があるかどうか、次第のように思えます。

シンプルに解決するなら、HTML要素に持たせることをせず、
phpの出力処理の中でjsのコードを出力させ、
js上のオブジェクトとして読み込めるように手引すればよいのではないかと。

つまり

$data = '(json_encodeしたデータ)';
echo <<<EOT
<script type="text/javascript>
const fore = {
            label: "フォア",
            backgroundColor: "rgba(179,181,198,0.5)",
            data: [${data}],
};
</script>
EOT;

みたいにすればjs上のオブジェクトになりますよね。
ヒアドキュメント構文を使えば、引用符のエスケープに煩わされることもないでしょうし。

Comments

[yuyamaa]

回答ありがとうございます。json_encodeの方法がわかりません。
よろしければご教授いただきたいです。
＜試したこと＞
$rubbers = $db->query('SELECT * FROM rubber WHERE number=51');
$rubber = $rubbers->fetch();
$list = array($rubber['price'], $rubber['speed']);
$data = json_encode($list);

Answer 2

以前使用したことのあるサンプルコードを添付します。
お役に立てれば幸いです。
<canvas id="myChart"></canvas>

<script> var myPieChart = new Chart(document.getElementById("myChart"), { type: 'pie', data: { labels: ["ポスティング", "ハンディング", "HP", "フリーコール", "友人紹介"], datasets: [{ backgroundColor: [ "#BB5179", "#FAFF67", "#58A27C", "#3C00FF", "#3CFFFF" ], data: [ <?php foreach($pie as $value) { echo $value.","; } ?> ] }] }, options: { title: { display: true, text: '問合せ種別' } } }); </script>

Comments

[退会済みユーザー]

foreach($pie as $value) {
echo $value.",";
}
の箇所は
echo implode(', ', $pie);
しちゃったほうが簡便だし、後ろに余計な「,」をつけずに済みますよ。

[Gm22]

訂正してくださってありがとうございます。
参考になりました。

Answer 3

elementという変数がどこにも定義されてないからでは。
canvasに直接data属性に設定したならidもついてますし$('#myChart').data('score')で良いのでは？
ただ、Chart.jsのオプションとしてのdataはオブジェクトを与える必要があるので、data属性内もPHPで配列つくってjson_encode()した値にしておかないと["123,456"]のような値が渡る気がします。