在Twig文件中用JavaScript集成amCharts遇解析问题求助

问题根源分析 #

你的代码存在几个关键语法和逻辑错误，直接导致图表无法正常初始化：

• 日期字符串未加引号：Twig渲染country: {{ data.sales_date }}时，日期会被当成JS表达式而非字符串，引发语法错误。
• Root实例重复创建且参数错误：先通过am5.Root.new("kt_charts_widget_15_chart")创建了e，又试图用这个实例作为参数创建t，不符合amCharts的API规范。
• 数组末尾多余逗号：Twig循环生成数组项时，最后一项会多一个逗号，导致JS数组解析失败。
• 初始化逻辑混乱：am5.ready的位置和Root实例的创建流程冲突，导致图表初始化失败。

修正后的代码 #

<div id="kt_charts_widget_15_chart" class="min-h-auto ps-4 pe-6 mb-3 h-350px"></div>
<script>
    var KTChartsWidget15 = {
        init: function () {
            am5.ready(function () {
                // 正确创建Root实例，直接传入容器ID
                var root = am5.Root.new("kt_charts_widget_15_chart");
                if (!root) return;

                root.setThemes([am5themes_Animated.new(root)]);

                // 用Twig的json_encode安全生成数组，避免语法错误
                var salesData = {{ getLastDays|map(data => {
                    country: data.sales_date,
                    visits: data.total_sales,
                    icon: "https://www.amcharts.com/wp-content/uploads/flags/united-states.svg",
                    columnSettings: { fill: "am5.color(KTUtil.getCssVariableValue('--bs-primary'))" }
                })|json_encode|raw }};

                // 替换columnSettings里的字符串为实际JS代码
                salesData.forEach(item => {
                    item.columnSettings.fill = am5.color(KTUtil.getCssVariableValue("--bs-primary"));
                });

                var chart = root.container.children.push(am5xy.XYChart.new(root, { panX: false, panY: false, layout: root.verticalLayout }));

                var xAxis = chart.xAxes.push(
                    am5xy.CategoryAxis.new(root, {
                        categoryField: "country",
                        renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 30 }),
                        bullet: function (root, axis, dataItem) {
                            return am5xy.AxisBullet.new(root, {
                                location: 0.5,
                                sprite: am5.Picture.new(root, {
                                    width: 24,
                                    height: 24,
                                    centerY: am5.p50,
                                    centerX: am5.p50,
                                    src: dataItem.dataContext.icon,
                                }),
                            });
                        },
                    })
                );

                xAxis.get("renderer").labels.template.setAll({ paddingTop: 20, fontWeight: "400", fontSize: 10, fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")) });
                xAxis.get("renderer").grid.template.setAll({ disabled: true, strokeOpacity: 0 });
                xAxis.data.setAll(salesData);

                var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
                yAxis.get("renderer").grid.template.setAll({ stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")), strokeWidth: 1, strokeOpacity: 1, strokeDasharray: [3] });
                yAxis.get("renderer").labels.template.setAll({ fontWeight: "400", fontSize: 10, fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")) });

                var series = chart.series.push(am5xy.ColumnSeries.new(root, { xAxis: xAxis, yAxis: yAxis, valueYField: "visits", categoryXField: "country" }));
                series.columns.template.setAll({ tooltipText: "{categoryX}: {valueY}", tooltipY: 0, strokeOpacity: 0, templateField: "columnSettings" });
                series.columns.template.setAll({ strokeOpacity: 0, cornerRadiusBR: 0, cornerRadiusTR: 6, cornerRadiusBL: 0, cornerRadiusTL: 6 });
                series.data.setAll(salesData);
                series.appear();
                chart.appear(1000, 100);
            });
        },
    };

    "undefined" != typeof module && (module.exports = KTChartsWidget15);

    KTUtil.onDOMContentLoaded(function () {
        KTChartsWidget15.init();
    });
</script>

关键修正点说明 #

1. 正确创建Root实例：直接在am5.ready里创建Root，避免重复实例化，确保DOM容器已加载完成。
2. 安全生成JS数组：用Twig的map和json_encode过滤器生成数组，自动处理引号和逗号问题，避免语法错误。
3. 处理动态颜色值：因为json_encode会把JS代码转成字符串，所以需要遍历数组把颜色值转成实际的am5.color对象。
4. 简化变量命名：把原代码里的e、t等模糊变量改成root、chart等有意义的名称，提升可读性。

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