Laravel 8 ConsoleTvs 7如何通过advancedDataset的extra参数配置数据集

问题原因 #

ConsoleTvs/Chartisan 7 中advancedDataset方法传入的第三个extra参数，仅会作为返回数据的extra字段随接口传递到前端，默认不会自动合并到Chart.js的数据集配置中，因此直接传入不会生效，删除前端Hook后走默认渲染逻辑，就会输出默认柱状图。

解决方法 #

你只需要在前端的ChartisanHooks.datasets方法中，手动将每个数据集的extra字段配置合并到最终的数据集配置中即可，无需重复配置：

前端示例代码 #

// 确保已提前引入注册chartjs-plugin-datalabels插件
import ChartDataLabels from 'chartjs-plugin-datalabels';

const chart = new Chartisan({
  el: '#你的图表容器ID',
  url: "@route('你的图表接口路由')",
  hooks: new ChartisanHooks()
    .datasets((responseData) => {
      // 遍历所有后端返回的数据集，合并extra配置
      return responseData.datasets.map(item => {
        return {
          // 优先合并后端传入的个性化配置
          ...item.extra,
          // 保留基础必填配置
          label: item.name,
          data: item.values,
          // 可在这里添加全局公共配置，无需每个后端extra重复传入
          borderWidth: 1,
        }
      })
    })
    .plugins([ChartDataLabels])
    // 其他Hook配置按需添加，比如标题、坐标轴配置等
});

这样所有你在后端$values['extra']中定义的配置项，都会自动生效到对应的数据集。

注意事项 #

• extra数组内的字段名必须和Chart.js v2.9.4 官方文档的数据集配置项完全一致，否则不会生效
• 若多个数据集存在相同的公共配置，直接写在前端map返回的对象中即可，无需在后端每个extra中重复定义，减少冗余代码
• 你代码中的borderDash、datalabels等特殊配置，只要和你设置的type匹配，且对应插件已正确注册，合并后会直接生效

内容的提问来源于stack exchange，提问作者Hmerman6006