AMCharts图表未在Wordpress中显示 [英] AMCharts chart not showing up in Wordpress

问题描述

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

该图显示了施工散布梁的载荷跨度值，并使用以下代码创建

 < div id =" $ CHART $"style =" width:100％;高度:400像素；</div和JSON代码var chart = am4core.create("$ CHART $"，am4charts.XYChart);chart.data = [{类别":0.5，"value1":8值2":6.7}，{类别":1"value1":8值2":6.7}，{类别":1.5，"value1":8值2":6.7}，{类别":2"value1":8值2":6.7}，{类别":2.5，"value1":8"value2":5}，{类别":3，"value1":6.5，"value2":3.7}，{类别":3.5，"value1":5"value2":2.9}，{类别":4"value1":3.9，"value2":2.3}]，"xAxes":[{"type":"CategoryAxis"，"id":"id-1"，标题":{"type":"Label"，"id":"span"，文本":米的跨度"}，"dataFields":{类别":}，"startLocation":0.5，"endLocation":0.5，渲染器":{网格":{模板":{"type":"Grid"，位置":0.5}}，"minGridDistance":20}}]，"yAxes":[{"type":"ValueAxis"，"id":"id-2"，标题":{"type":"Label"，"id":"swl"，文本":以吨为单位的S.W.L"，"propertyFields":{}}，"min":"0"，"max":"10"，渲染器":{"maxLabelPosition":0.98}}]，系列":[{" type":"LineSeries"，名称":"30°垂直吊索"，"xAxis":"id-1"，"yAxis":"id-2"，" baseAxis":"id-1"，"dataFields":{"valueY":"value1"，"categoryX":"category"}，"fillOpacity":0.5，"strokeWidth":2，"sequencedInterpolation":是的，"sequencedInterpolationDelay":100，"tooltipText":"{name} \ n {categoryX}:{valueY}"}，{" type":"LineSeries"，名称":"45°悬吊至垂直角度"，"xAxis":"id-1"，"yAxis":"id-2"，"dataFields":{"valueY":"value2"，"categoryX":"category"}，"simplifiedProcessing":是的，"calculatePercent":是的，"fillOpacity":0.5，"strokeWidth":2，"sequencedInterpolation":是的，"sequencedInterpolationDelay":100，"tooltipText":"{name} \ n {categoryX}:{valueY}"}]，传奇":{类型":传奇"，" setStateOnChildren" ;:是的，"showOnInit":是的，可见":是的，已禁用":false，"dataFields":{}，位置":顶部"}，光标":{"type":"XYCursor"，"tooltipPosition":固定"；}，"dataFields":{}，颜色":{"type":"ColorSet"，换行":false，随机播放":否，重用":否，"baseColor":#6b7894"} 

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

URL是

解决方案

这是完整的工作代码:

  var chart = am4core.createFromConfig({数据":[{类别":0.5，"value1":8值2":6.7}，{类别":1"value1":8值2":6.7}，{类别":1.5，"value1":8值2":6.7}，{类别":2"value1":8值2":6.7}，{类别":2.5，"value1":8"value2":5}，{类别":3，"value1":6.5，"value2":3.7}，{类别":3.5，"value1":5"value2":2.9}，{类别":4"value1":3.9，"value2":2.3}]，"xAxes":[{"type":"CategoryAxis"，"id":"id-1"，标题":{"type":"Label"，"id":"span"，文本":米的跨度"}，"dataFields":{类别":}，"startLocation":0.5，"endLocation":0.5，渲染器":{网格":{模板":{"type":"Grid"，位置":0.5}}，"minGridDistance":20}}]，"yAxes":[{"type":"ValueAxis"，"id":"id-2"，标题":{"type":"Label"，"id":"swl"，文本":以吨为单位的S.W.L"，"propertyFields":{}}，"min":"0"，"max":"10"，渲染器":{"maxLabelPosition":0.98}}]，系列":[{" type":"LineSeries"，名称":"30°垂直吊索"，"xAxis":"id-1"，"yAxis":"id-2"，" baseAxis":"id-1"，"dataFields":{"valueY":"value1"，"categoryX":"category"}，"fillOpacity":0.5，"strokeWidth":2，"sequencedInterpolation":是的，"sequencedInterpolationDelay":100，"tooltipText":"{name} \ n {categoryX}:{valueY}"}，{" type":"LineSeries"，名称":"45°悬吊至垂直角度"，"xAxis":"id-1"，"yAxis":"id-2"，"dataFields":{"valueY":"value2"，"categoryX":"category"}，"simplifiedProcessing":是的，"calculatePercent":是的，"fillOpacity":0.5，"strokeWidth":2，"sequencedInterpolation":是的，"sequencedInterpolationDelay":100，"tooltipText":"{name} \ n {categoryX}:{valueY}"}]，传奇":{类型":传奇"，" setStateOnChildren" ;:是的，"showOnInit":是的，可见":是的，已禁用":false，"dataFields":{}，位置":顶部"}，光标":{"type":"XYCursor"，"tooltipPosition":固定"；}，"dataFields":{}，颜色":{"type":"ColorSet"，换行":false，随机播放":否，重用":否，"baseColor":#6b7894"}}，"$ CHART $"，am4charts.XYChart)； 

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

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

解决方案

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/

这篇关于AMCharts图表未在Wordpress中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！