gpt4 book ai didi

javascript - Laravel 8 ConsoleTvs 7 - 通过 advancedDataset 方法的额外参数应用数据集配置

转载 作者:行者123 更新时间:2023-12-05 00:32:04 24 4
gpt4 key购买 nike

我正在使用内置的后端 advancedDataset 将数据发送到 ConsoleTvs 7 Chartisan 图表的前端方法。作为第三个参数,我决定以数组数据类型发送额外的数据集配置:

// Example of extra info data that forms part of chartData return
$data['extra'] = ['type' => 'line', 'fill' => false, 'borderColor' => '#FF6F6F', 'backgroundColor' => '#FF6F6F', 'hidden' => true,
'datalabels' => ['display' => true], 'borderDash' => [5, 5]];
//--> within handler method
public function handler(Request $request): Chartisan
{
$data = $this->chartData($request); // Trait method chartData return

$chart = Chartisan::build()
->labels($data["labels"]);

foreach ($data['dataset'] as $key => $values) {
$chart->advancedDataset($values['legend'], $values['data'], $values['extra']);
// ^
//----------------------------- -------------------------------------| extra arg
}

return $chart;
}
此额外值不适用于数据集配置。事实上,如果我删除 ChartisanHooks.datasets(...[ configurations ]...),图表会呈现其默认条形图。方法。
我怎样才能将额外的数据集配置应用到前端而不必采取双重工作?是否有我缺少的设置或如何访问 extra争论?
拉拉维尔 8
Chart.js v2.9.4
chartjs-plugin-datalabels v1.0.0

最佳答案

终于在不那么晦涩的Chartisan documentation 中找到了答案.custom()前端方法const hooks = new ChartisanHooks()实例包含 3 个钩子(Hook)参数,即:

hooks.custom(({ data, merge, server }) => {
// data -> Contains the current chart configuration
// data that will be passed to the chart instance.
// merge -> Contains a function that can be called to merge
// two javascript objects and returns its merge.
// server -> Contains the server information in case you need
// to acces the raw information provided by the server.
// This is mostly used to access the `extra` field.

// ...

// The function must always return the new chart configuration.
return data
})
恰如其分的 server key 包含 datasets由一组对象组成的键,其中一个键名为 extra IE。
server.datasets[0].extra // all array key : values passed from server
万岁!

所以要访问这个 extra key : 我将它们传递给前端的值 hooks.custom()方法 data.datasets[0]对象或创建新对象,例如
const chart = new Chartisan({
el: '#test_chart',
hooks: new ChartisanHooks()
.colors()
.custom(function({ data, merge, server }) { // server param

//---> loop through extra from server
for (let i = 0; i < server.datasets.length; i++) {
const extras = server.datasets[i].extra; // extra object
for (const [key, value] of Object.entries(extras)) { // loop through extras
data.data.datasets[i][key] = value; // add extras to data
}

}
return merge(data, { // merge data
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 50,
bottom: 0
},
},
aspectRatio: 1,
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
position: 'top',
labels: {
usePointStyle: true,
fontSize: 12,
},
},
elements: {
point: {
pointStyle: 'circle',
}
},
scales: {
xAxes: [{
maxBarThickness: 120,
scaleLabel: {
display: true,
labelString: "xAxes_label"
},
gridLines: {
display: false
},
ticks: {
fontSize: 10,
maxRotation: 80,
minRotation: 80,
padding: 2
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "yAxes_label"
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
display: true,
fontSize: 10,
suggestedMin: 0
},
}],
},
plugins: {
datalabels: {
color: '#ff0a6c',
labels: {
title: {
font: {
weight: 'bold',
size: 11,
}
},
value: {
color: 'green'
}
},
formatter: function(value, context) {
return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
},
anchor: 'end',
align: 'start',
display: 'auto',
clamp: false
}
}
}
});
}),
});
当然这是非常粗略的,需要检查客户端是否支持其中一些方法。还有 server.datasets[i].extra !== null , object[key] !== undefined还需要等检查。

这当然使这从后端更加动态。问题是,ConsoleTvs 包作为一个后端安全的 Laravel 包已经死了,它的开发人员是否仍然支持它。

关于javascript - Laravel 8 ConsoleTvs 7 - 通过 advancedDataset 方法的额外参数应用数据集配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69620329/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com