如何在 laravel 控制器的 chartjs 选项中设置自定义刻度格式？答案

【问题标题】：how to set a custom tick format in chartjs options from laravel controller?如何在 laravel 控制器的 chartjs 选项中设置自定义刻度格式？
【发布时间】：2022-01-27 10:07:41
【问题描述】：

我正在尝试通过 Laravel Charts 在条形图中的实际值之前添加 $ 符号来自定义刻度标签。
在 chartjs 文档 (https://www.chartjs.org/docs/2.7.3/axes/labelling.html#creating-custom-tick-formats) 中，它被描述为这样做：

var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    scales: {
        yAxes: [{
            ticks: {
                // Include a dollar sign in the ticks
                callback: function(value, index, values) {
                    return '$' + value;
                }
            }
        }]
    }
}

我正在为回调函数苦苦挣扎，因为我不知道如何在图表控制器中执行此操作 - 目前它看起来像这样（我只是将它作为 js 格式的字符串放入），但它不起作用：

$this->chart->options([
        'maintainAspectRatio' => false,
        'showLines' => false,
        'scales'              => [
            'xAxes' => [],
            'yAxes' => [
                [
                    'ticks' => [
                        'display' => true,
                        'callback' => "{function(value, index, values) {
                            return '$' + value;
                        }}",
                    ],
                ],
            ],
        ],
    ]);

【问题讨论】：

为什么要用大括号包起来？你使用什么库从 Laravel 访问图表？

标签： laravel chart.js laravel-backpack laravel-charts

【解决方案1】：

这是我第一次使用背包中的图表，但经过一些试验后，我能够使用 rawObject 修复它：

$this->chart->options([
        'maintainAspectRatio' => false,
        'showLines' => true,
        'scales' => [
            'xAxes' => [],
            'yAxes' => [
                [
                    'ticks' => [
                        'display' => true,
                        'callback' => $this->chart->rawObject('euroLabel')
                    ],
                ],
            ],
        ],
        'legend' => [
            'display' => false
        ],
        'tooltips' => [
            'callbacks' => [
                'label' => $this->chart->rawObject('euroLabelTooltip')
            ]
        ]
    ]);

在js中：

function euroLabel(value, index, values) {
    return currencyLabels.format(value);
}

虽然 currencyLable 看起来像这样：

var currencyLabels = new Intl.NumberFormat('de-AT', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
});

【讨论】：