如何在 laravel 控制器的 chartjs 选项中设置自定义刻度格式?
how to set a custom tick format in chartjs options from laravel controller?
我正在尝试通过 Laravel 图表在条形图中的实际值之前添加 $ 符号来自定义刻度标签。
在 chartjs docu (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;
}}",
],
],
],
],
]);
这是我第一次在背包中使用图表,但经过一些尝试后我能够使用 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
});
我正在尝试通过 Laravel 图表在条形图中的实际值之前添加 $ 符号来自定义刻度标签。
在 chartjs docu (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;
}}",
],
],
],
],
]);
这是我第一次在背包中使用图表,但经过一些尝试后我能够使用 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
});