Question

我是拉斐尔的新手，所以我试图通过可用的教程学习一些东西。

我遇到了问题，我只是从Raphael的网站上复制/粘贴源代码： http://g.raphaeljs.com/piechart2.html

我右键单击以查看源代码，然后在我的记事本++中复制/粘贴。我确实添加了所需的JS和CSS文件，一切都是一样的。

我的代码：

   <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="demo.css" media="screen">
        <link rel="stylesheet" href="demo-print.css" media="print">
        <script src="raphael-min.js"></script>
        <script src="g.raphael-min.js"></script>
        <script src="g.pie-min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

    <div id="pie"></div>
    <script>
        <script type="text/javascript">
            window.onload = function () {
                var r = Raphael("holder"),
                pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});

                r.text(320, 100, "Interactive Pie Chart").attr({ font: "20px sans-serif" });
                /*pie.hover(function () {
                    this.sector.stop();
                    this.sector.scale(1.1, 1.1, this.cx, this.cy);*/

                    /*if (this.label) {
                        this.label[0].stop();
                        this.label[0].attr({ r: 7.5 });
                        this.label[1].attr({ "font-weight": 800 });
                    }
                }, function () {
                    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

                    if (this.label) {
                        this.label[0].animate({ r: 5 }, 500, "bounce");
                        this.label[1].attr({ "font-weight": 400 });
                    }*/
                });
            };
        </script>
    </head>
    <body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
        <div id="holder"></div>
        <p>
            Pie chart with legend, hyperlinks on two first sectors and hover effect.
        </p>
        <p>
            Demo of <a href="http://g.raphaeljs.com/">gRaphaël</a> JavaScript library.
        </p>
    </body>
</html>

忽略＆＃34;评论的行＆＃34;，这是我试图调试我的问题。我得到了背景，但图表却没有显示出来。

任何帮助都将不胜感激。

Answer 1

提供画布尺寸。

而不是：

var r = Raphael("holder"),

尝试使用：

var r = Raphael("holder", 0, 0, 520, 440),

Answer 2

您应检查Active x控件的浏览器设置。当您尝试加载页面时，浏览器可能会显示一条提示消息。类似的东西： -

＆＃34;为了帮助保护您的安全，Internet Explorer限制此页面运行可以访问您计算机的脚本或ActiveX控件。单击此处以查看选项...＆＃34; 您需要点击消息＆amp;选择选项 - ＆＃39;允许阻止的内容＆＃39;

因为我没有看到您的画布创建或坐标有任何问题。

G.Raphael动态饼图代码不起作用

2 个答案: