如何在canvas标签中绘制canvasJS图形？

Question

I have tried to plot the canvasJS graph in the canvas tag of HTML so I'm not able to do so I need some help..! 我试图在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>

I want the graph to be plotted using the canvas tag but not by using div tag. 我希望使用canvas标记而不是使用div标记绘制图形。 Because once I use this code in the bootstrap template it comes out the panel allotted for the graph. 因为一旦在引导模板中使用此代码，就会出现分配给图形的面板。

I want the graph to be plotted using the canvas tag but not by using div tag. 我希望使用canvas标记而不是使用div标记绘制图形。

Answer 1

CanvasJS dynamically creates and adds Canvas to the chartContainer(div) provided. CanvasJS动态创建Canvas并将其添加到提供的chartContainer（div）中。 Changing canvas to div should work fine in your case. 将画布更改为div应该适合您的情况。 Please find the updated code below: 请在下面找到更新的代码：

 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>

如何在canvas标签中绘制canvasJS图形？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-01-08 08:39:42

如何在canvas标签中绘制canvasJS图形？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-01-08 08:39:42

解决方案1
1 已采纳 2019-01-08 08:39:42