AMCharts 图表未显示在 Wordpress 中

Question

我使用 Amcharts 创建了 XY 2 系列图表，并安装了 WordPress 插件。

该图表显示了建筑吊梁的荷载跨度值，并使用以下代码创建

<div id="$CHART$" style="width: 100%; height: 400px;"></div>

and the JSON code

var chart = am4core.create("$CHART$", am4charts.XYChart);
chart.data = [{
        "category": 0.5,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 1,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 1.5,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 2,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 2.5,
        "value1": 8,
        "value2": 5
    }, {
        "category": 3,
        "value1": 6.5,
        "value2": 3.7
    }, {
        "category": 3.5,
        "value1": 5,
        "value2": 2.9
    }, {
        "category": 4,
        "value1": 3.9,
        "value2": 2.3
    }],
    "xAxes": [{
        "type": "CategoryAxis",
        "id": "id-1",
        "title": {
            "type": "Label",
            "id": "span",
            "text": "Span in Metres"
        },
        "dataFields": {
            "category": "category"
        },
        "startLocation": 0.5,
        "endLocation": 0.5,
        "renderer": {
            "grid": {
                "template": {
                    "type": "Grid",
                    "location": 0.5
                }
            },
            "minGridDistance": 20
        }
    }],
    "yAxes": [{
        "type": "ValueAxis",
        "id": "id-2",
        "title": {
            "type": "Label",
            "id": "swl",
            "text": "S.W.L in Tonnes",
            "propertyFields": {}
        },
        "min": "0",
        "max": "10",
        "renderer": {
            "maxLabelPosition": 0.98
        }
    }],
    "series": [{
        "type": "LineSeries",
        "name": "30° Sling To Vertical Angle",
        "xAxis": "id-1",
        "yAxis": "id-2",
        "baseAxis": "id-1",
        "dataFields": {
            "valueY": "value1",
            "categoryX": "category"
        },
        "fillOpacity": 0.5,
        "strokeWidth": 2,
        "sequencedInterpolation": true,
        "sequencedInterpolationDelay": 100,
        "tooltipText": "{name}\n{categoryX}: {valueY}"
    }, {
        "type": "LineSeries",
        "name": "45° Sling To Vertical Angle",
        "xAxis": "id-1",
        "yAxis": "id-2",
        "dataFields": {
            "valueY": "value2",
            "categoryX": "category"
        },
        "simplifiedProcessing": true,
        "calculatePercent": true,
        "fillOpacity": 0.5,
        "strokeWidth": 2,
        "sequencedInterpolation": true,
        "sequencedInterpolationDelay": 100,
        "tooltipText": "{name}\n{categoryX}: {valueY}"
    }],
    "legend": {
        "type": "Legend",
        "setStateOnChildren": true,
        "showOnInit": true,
        "visible": true,
        "disabled": false,
        "dataFields": {},
        "position": "top"
    },
    "cursor": {
        "type": "XYCursor",
        "tooltipPosition": "fixed"
    },
    "dataFields": {},
    "colors": {
        "type": "ColorSet",
        "wrap": false,
        "shuffle": false,
        "reuse": false,
        "baseColor": "#6b7894"
    }

在 amcharts 编辑器中生成了一个很好的交互式图表，但在 WordPress 页面上只是一个空白的 400px 高矩形。/我已经检查了来源并且似乎没问题。

URL 是 https://applifting.ga/modular-spreader-beams/sectionlift-6/

图表应该出现在“加载跨度数据”标题下这里还有一个截图，有谁知道为什么图表没有显示出来？谢谢

Answer 1

这是完整的工作代码：

var chart = am4core.createFromConfig({
   
   "data" : [{
        "category": 0.5,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 1,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 1.5,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 2,
        "value1": 8,
        "value2": 6.7
    }, {
        "category": 2.5,
        "value1": 8,
        "value2": 5
    }, {
        "category": 3,
        "value1": 6.5,
        "value2": 3.7
    }, {
        "category": 3.5,
        "value1": 5,
        "value2": 2.9
    }, {
        "category": 4,
        "value1": 3.9,
        "value2": 2.3
    }],
    
    "xAxes": [{
        "type": "CategoryAxis",
        "id": "id-1",
        "title": {
            "type": "Label",
            "id": "span",
            "text": "Span in Metres"
        },
        "dataFields": {
            "category": "category"
        },
        "startLocation": 0.5,
        "endLocation": 0.5,
        "renderer": {
            "grid": {
                "template": {
                    "type": "Grid",
                    "location": 0.5
                }
            },
            "minGridDistance": 20
        }
    }],
    "yAxes": [{
        "type": "ValueAxis",
        "id": "id-2",
        "title": {
            "type": "Label",
            "id": "swl",
            "text": "S.W.L in Tonnes",
            "propertyFields": {}
        },
        "min": "0",
        "max": "10",
        "renderer": {
            "maxLabelPosition": 0.98
        }
    }],
    "series": [{
        "type": "LineSeries",
        "name": "30° Sling To Vertical Angle",
        "xAxis": "id-1",
        "yAxis": "id-2",
        "baseAxis": "id-1",
        "dataFields": {
            "valueY": "value1",
            "categoryX": "category"
        },
        "fillOpacity": 0.5,
        "strokeWidth": 2,
        "sequencedInterpolation": true,
        "sequencedInterpolationDelay": 100,
        "tooltipText": "{name}\n{categoryX}: {valueY}"
    }, {
        "type": "LineSeries",
        "name": "45° Sling To Vertical Angle",
        "xAxis": "id-1",
        "yAxis": "id-2",
        "dataFields": {
            "valueY": "value2",
            "categoryX": "category"
        },
        "simplifiedProcessing": true,
        "calculatePercent": true,
        "fillOpacity": 0.5,
        "strokeWidth": 2,
        "sequencedInterpolation": true,
        "sequencedInterpolationDelay": 100,
        "tooltipText": "{name}\n{categoryX}: {valueY}"
    }],
    "legend": {
        "type": "Legend",
        "setStateOnChildren": true,
        "showOnInit": true,
        "visible": true,
        "disabled": false,
        "dataFields": {},
        "position": "top"
    },
    "cursor": {
        "type": "XYCursor",
        "tooltipPosition": "fixed"
    },
    "dataFields": {},
    "colors": {
        "type": "ColorSet",
        "wrap": false,
        "shuffle": false,
        "reuse": false,
        "baseColor": "#6b7894"
    }


}, "$CHART$", am4charts.XYChart);

实时样本： https://jsfiddle.net/a4ujzoxh/

AMCharts 图表未显示在 Wordpress 中

AMCharts chart not showing up in Wordpress

javascript

wordpress

json

amcharts