我在Notepad ++中使用了以下代码,当我在chrome中打开它时,它可以很好地创建不同搜索引擎的饼图:
let msg = ...
const dlog = document.querySelector('error-dialog');
dlog.dispatchEvent(new CustomEvent('o_error', {detail: msg, bubbles: true, composed: true}));
我试图将它放到Wordpress上的计划文本页面中,它返回一个带有<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Desktop Search Engine Market Share - 2016"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {y}",
dataPoints: [
{y: 79.45, label: "Google"},
{y: 7.31, label: "Bing"},
{y: 7.06, label: "Baidu"},
{y: 4.91, label: "Yahoo"},
{y: 1.26, label: "Others"}
]
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
容器尺寸的大空白区域。
我应该提到我正在使用 Avada子主题,并且在header.php文件中我添加了以下内容:
<div>
我觉得答案是Wordpress方面发生的非常简单的事情,但我还没有开发出Wordpress主题,所以我有点迷失在哪里看。
有什么想法吗?