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

【问题标题】：G.Raphael Dynamic Pie Chart code not workingG.Raphael 动态饼图代码不起作用
【发布时间】：2014-04-14 18:49:02
【问题描述】：

我是 Raphael 的新手，所以我正在尝试通过可用的教程学习一些东西。

我遇到了一个问题，我只是从 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>

忽略“注释行”，这是我试图调试我的问题。我得到了背景，但图表不会显示。

任何帮助将不胜感激。

【问题讨论】：

你检查过你的控制台吗？

标签： javascript html css charts raphael

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

给出你的画布尺寸。

而不是：

var r = Raphael("holder"),

尝试使用：

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

【讨论】：