如何在 canvas 标签中绘制 canvasJS 图表?
How to plot a canvasJS graph in canvas tag?
我试图在 HTML 的 canvas 标签中绘制 canvasJS 图,所以我做不到,我需要一些帮助..!
<html>
<head>
<script>
window.onload = function () {
var options = {
title: {
text: "Desktop OS Market Share in 2017"
},
data: [{
type: "pie",
dataPoints: [
{ y: 48.36, label: "Windows 7" },
{ y: 26.85, label: "Windows 10" },
{ y: 1.49, label: "Windows 8" },
{ y: 6.98, label: "Windows XP" },
{ y: 6.53, label: "Windows 8.1" },
{ y: 2.45, label: "Linux" },
{ y: 3.32, label: "Mac OS X 10.12" },
{ y: 4.03, label: "Others" }
]
}]
};
$("#chartContainer").CanvasJSChart(options);
}
</script>
</head>
<body>
<div>
<canvas id="chartContainer" height="300" width="400"> </canvas>
</div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>
我希望使用 canvas 标签而不是 div 标签绘制图表。因为一旦我在 bootstrap 模板中使用此代码,它就会出现分配给图形的面板。
我希望使用 canvas 标签而不是 div 标签绘制图表。
CanvasJS动态创建并添加Canvas到提供的chartContainer(div)。将 canvas 更改为 div 在您的情况下应该可以正常工作。请在下面找到更新的代码:
var options = {
title: {
text: "Desktop OS Market Share in 2017"
},
data: [{
type: "pie",
dataPoints: [
{ y: 48.36, label: "Windows 7" },
{ y: 26.85, label: "Windows 10" },
{ y: 1.49, label: "Windows 8" },
{ y: 6.98, label: "Windows XP" },
{ y: 6.53, label: "Windows 8.1" },
{ y: 2.45, label: "Linux" },
{ y: 3.32, label: "Mac OS X 10.12" },
{ y: 4.03, label: "Others" }
]
}]
};
$("#chartContainer").CanvasJSChart(options);
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="chartContainer" height="300" width="400"></div>
我试图在 HTML 的 canvas 标签中绘制 canvasJS 图,所以我做不到,我需要一些帮助..!
<html>
<head>
<script>
window.onload = function () {
var options = {
title: {
text: "Desktop OS Market Share in 2017"
},
data: [{
type: "pie",
dataPoints: [
{ y: 48.36, label: "Windows 7" },
{ y: 26.85, label: "Windows 10" },
{ y: 1.49, label: "Windows 8" },
{ y: 6.98, label: "Windows XP" },
{ y: 6.53, label: "Windows 8.1" },
{ y: 2.45, label: "Linux" },
{ y: 3.32, label: "Mac OS X 10.12" },
{ y: 4.03, label: "Others" }
]
}]
};
$("#chartContainer").CanvasJSChart(options);
}
</script>
</head>
<body>
<div>
<canvas id="chartContainer" height="300" width="400"> </canvas>
</div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>
我希望使用 canvas 标签而不是 div 标签绘制图表。因为一旦我在 bootstrap 模板中使用此代码,它就会出现分配给图形的面板。
我希望使用 canvas 标签而不是 div 标签绘制图表。
CanvasJS动态创建并添加Canvas到提供的chartContainer(div)。将 canvas 更改为 div 在您的情况下应该可以正常工作。请在下面找到更新的代码:
var options = {
title: {
text: "Desktop OS Market Share in 2017"
},
data: [{
type: "pie",
dataPoints: [
{ y: 48.36, label: "Windows 7" },
{ y: 26.85, label: "Windows 10" },
{ y: 1.49, label: "Windows 8" },
{ y: 6.98, label: "Windows XP" },
{ y: 6.53, label: "Windows 8.1" },
{ y: 2.45, label: "Linux" },
{ y: 3.32, label: "Mac OS X 10.12" },
{ y: 4.03, label: "Others" }
]
}]
};
$("#chartContainer").CanvasJSChart(options);
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<div id="chartContainer" height="300" width="400"></div>