Javascript G.Raphael动态饼图代码不工作_Javascript_Html_Css_Charts_Raphael

Javascript G.Raphael动态饼图代码不工作

javascript html css charts

Javascript G.Raphael动态饼图代码不工作,javascript,html,css,charts,raphael,Javascript,Html,Css,Charts,Raphael,我是拉斐尔家族的新手，所以我试图通过现有的教程学习一些东西我遇到了一个问题，我只是从Raphael的站点复制/粘贴源代码：我右键单击以查看源代码，然后复制/粘贴到记事本++。我添加了所需的JS和CSS文件，一切都是一样的我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="styles

我是拉斐尔家族的新手，所以我试图通过现有的教程学习一些东西

我遇到了一个问题，我只是从Raphael的站点复制/粘贴源代码：

我右键单击以查看源代码，然后复制/粘贴到记事本++。我添加了所需的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>


window.onload=函数（）{
var r=拉斐尔（“持有人”），
pie=r.piechart（320、240、100、[55、20、13、32、5、1、2、10]，{图例：[“%.%.%-企业用户”，“IE用户”]，legendpos:“west”，href:[”http://raphaeljs.com", "http://g.raphaeljs.com"]});
r、 text（320100，“交互式饼图”）.attr（{font:“20px无衬线“}）；
/*悬停（函数（）{
此.sector.stop（）；
这个.sector.scale（1.1，1.1，this.cx，this.cy）*/
/*如果（本标签）{
此.label[0].stop（）；
this.label[0].attr（{r:7.5}）；
this.label[1].attr（{“font-weight”：800}）；
}
}，函数（）{
this.sector.animate（{transform:'s11'+this.cx+''+this.cy}，500，“bounce”）；
如果（本标签）{
this.label[0]。设置动画（{r:5}，500，“反弹”）；
this.label[1].attr（{“font-weight”：400}）；
}*/
});
};

带有图例的饼图、前两个扇区上的超链接和悬停效果。


JavaScript库的演示。

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

任何帮助都将不胜感激。

给出您的画布尺寸。

而不是：

var r = Raphael("holder"),

尝试使用：

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

您应该检查活动x控件的浏览器设置。当您尝试加载页面时，浏览器可能会显示提示消息。比如：-

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

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

您检查过控制台了吗？