Laravel 8下ConsoleTvs/Charts 7自定义Chartjs配置不生效求助

核心原因 #

ConsoleTVs/Charts v7 底层依赖的 Chart.js 版本从 2.x 升级到了 3.x，二者存在大量不兼容的破坏性更新，你当前使用的是 Chart.js v2 版本的配置写法，同时 v7 已废弃直接传 options 参数和 .options() 钩子的配置方式，因此所有自定义配置不生效。

具体修改步骤 #

• 配置必须通过 ChartisanHooks().custom() 钩子传入，不可直接写在 Chartisan 初始化的 options 参数中
• 按 Chart.js v3 的规范调整配置结构，核心调整点如下：
  1. 原顶层 legend 配置移动到 plugins.legend 下，字体大小配置从 fontSize 改为 font.size
  2. 坐标轴配置完全重构：原 xAxes/yAxes 数组改为 scales.x/scales.y 单个对象；scaleLabel 字段改为 title；gridLines 字段改为 grid；刻度字体大小从 ticks.fontSize 改为 ticks.font.size
  3. v7 默认不自带 datalabels 插件，需要先单独安装 chartjs-plugin-datalabels 并通过 .registerPlugin() 注册后，对应配置才能生效
  4. 所有字体大小类的配置，均从 fontSize 改为嵌套的 font.size 写法

修正后代码示例 #

// 先导入安装好的datalabels插件（如果用到的话）
import ChartDataLabels from 'chartjs-plugin-datalabels';

const chart = new Chartisan({
    el: '#test_chart',
    url: "@chart('test_chart_route')",
    hooks: new ChartisanHooks()
        .registerPlugin(ChartDataLabels) // 注册datalabels插件
        .colors()
        .datasets(
            [
                { type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' }, 
                { type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
                { type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' }, 
                { type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' }, 
                { type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
                { type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' }, 
                { type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' }, 
                { type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
                { type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' }, 
                { type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' }, 
                { type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
                { type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' },
            ]
        )
        // 通过custom钩子传入v3版本的配置
        .custom(({ merge }) => {
            merge.options = {
                layout: {
                    padding: {
                        left: 0,
                        right: 0,
                        top: 50,
                        bottom: 0
                    },
                },
                aspectRatio: 1,
                maintainAspectRatio: false,
                responsive: true,
                elements: {
                    point: {
                        pointStyle: 'circle',
                    }
                },
                plugins: {
                    // 图例配置移到plugins下
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            font: {
                                size: 12
                            }
                        },
                    },
                    // datalabels配置保留，插件注册后即可生效
                    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
                    }
                },
                scales: {
                    // x轴配置改为scales.x对象
                    x: {
                        maxBarThickness: 120,
                        // 原scaleLabel改为title
                        title: {
                            display: true,
                            text: "xAxes_label"
                        },
                        // 原gridLines改为grid
                        grid: {
                            display: false
                        },
                        ticks: {
                            font: {
                                size: 10
                            },
                            maxRotation: 80,
                            minRotation: 80,
                            padding: 2
                        },
                    },
                    // y轴配置改为scales.y对象
                    y: {
                        title: {
                            display: true,
                            text: "yAxes_label"
                        },
                        grid: {
                            display: false,
                            drawBorder: false
                        },
                        ticks: {
                            display: true,
                            font: {
                                size: 10
                            },
                            suggestedMin: 0
                        },
                    }
                }
            }
        })
});

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