如何解决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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。