AMCharts chart not showing up in Wordpress

问题

I have created and XY 2 series chart using Amcharts, and have the WordPress plugin installed.

The chart shows load span values for construction spreader beams and is created using the following code

<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"
    }

which in the amcharts editor produces a nice interactive chart, but on the WordPress page is just a blank 400px high rectangle./ I have checked the sources and seem to be OK.

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

and the chart is supposed to appear under the heading "Load Span Data" Here also is a screenshot, does anyone know why the chart is not showing up? Thanks

回答1:

This is full working code:

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);

Live sample: https://jsfiddle.net/a4ujzoxh/

来源：https://stackoverflow.com/questions/63409169/amcharts-chart-not-showing-up-in-wordpress