AMCharts图表未在Wordpress中显示

问题描述

我已经使用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,{
        "category": 1.5,{
        "category": 2,{
        "category": 2.5,"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","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","datafields": {
            "valueY": "value2","simplifiedProcessing": true,"calculatePercent": true,"tooltipText": "{name}\n{categoryX}: {valueY}"
    }],"legend": {
        "type": "Legend","setStateOnChildren": true,"showOnInit": true,"visible": true,"disabled": false,"datafields": {},"position": "top"
    },"cursor": {
        "type": "XYCursor","tooltipPosition": "fixed"
    },"colors": {
        "type": "ColorSet","wrap": false,"shuffle": false,"reuse": false,"baseColor": "#6b7894"
    }

这在amcharts编辑器中产生了一个很好的交互式图表，但是在wordpress页面上只是一个空白的400px高矩形。/我检查了源代码，看起来还可以。

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

，该图表应该出现在“负载跨度数据”标题下 这也是一个屏幕截图，有人知道为什么不显示图表吗？ 谢谢

解决方法

这是完整的工作代码：

var chart = am4core.createFromConfig({
   
   "data" : [{
        "category": 0.5,"value1": 8,"value2": 6.7
    },{
        "category": 1,{
        "category": 1.5,{
        "category": 2,{
        "category": 2.5,"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","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","dataFields": {
            "valueY": "value2","simplifiedProcessing": true,"calculatePercent": true,"tooltipText": "{name}\n{categoryX}: {valueY}"
    }],"legend": {
        "type": "Legend","setStateOnChildren": true,"showOnInit": true,"visible": true,"disabled": false,"dataFields": {},"position": "top"
    },"cursor": {
        "type": "XYCursor","tooltipPosition": "fixed"
    },"colors": {
        "type": "ColorSet","wrap": false,"shuffle": false,"reuse": false,"baseColor": "#6b7894"
    }


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

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