程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

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

发布于2023-05-29 21:19     阅读(139)     评论(0)     点赞(6)     收藏(4)


我试图在 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 标签绘制图形。因为一旦我在引导程序模板中使用此代码,它就会出现分配给图形的面板。

我希望使用 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>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/528439/1b0c2e7c114b1bc6c289/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

6 0
收藏该文
已收藏

评论内容:(最多支持255个字符)