laravel - 如何将 javascript 回调传递给 Laravel-Charts 中的 PHP 构造

Question

我在 Laravel 7 中使用laravel-charts包。我将 chartjs 的 datalabels 插件添加到 Chart 对象中，如下所示：

$this->options = [
    'responsive' => true,
    'maintainAspectRatio' => false,
    'legend' => [ 'display' => false ],
    'plugins' => [
        'datalabels' => [
            'color' => 'white',
            'weight' => 'bold',
            'font' => ['size' => 14],
            'formatter' => ''     
    ]
]

在另一个版本中，当我使用 vue.js 和 vue-chartjs 时，我可以使用以下方法格式化标签：

plugins: {
    datalabels: {
        formatter: function(value, context) {
            return '$' + Number(value).toLocaleString();
         },
   }
}

如您所见，javascript 作为 PHP 数组传递。我不知道如何将该格式化程序传递给我的 laravel-charts 版本。

任何帮助是极大的赞赏。

Answer 1

Laravel Charts plugins选项必须是代表纯 Javascript 对象的字符串。我找不到任何实际文档，但您可以在此处阅读相关问题“如何使用 ChartsJs 插件 Datalabels js？” .

你必须像这样传递它：

$chart = new ChartTest;
$chart->labels(['One Thousand', 'Two Thousand', 'Three Thousand', 'Four Thousand']);
$chart->dataset('My dataset', 'bar', [1000, 2000, 3000, 4000]);

$chart->options([
    // The whole plugins element is a string representing a JS object with plugins options
    'plugins' => "{
        datalabels: {
            color: 'red',
            font: {
                size: 14,
                weight: 'bold'
            },
            formatter: (value) => `\\$\${value}`
        }
    }"
]);

return view('chart', ['chart' => $chart]);

将应用chartjs-plugin-datalabels选项：

PS：该weight属性必须font像我的示例一样位于对象内部。