0

我在我的 Xampp 服务器上使用了与此处相同的代码。
我只用这个改变了 3 个脚本行： 

<script src="http://raphaeljs.com/raphael.js"></script>
<script src="http://g.raphaeljs.com/g.raphael.js"></script>
<script src="http://g.raphaeljs.com/g.bar.js"></script>

但是当我这样做时，Chrome 会返回此消息： 

GET http://raphaeljs.com/raphael.js 403 (Forbidden) barchart2.html:8
Uncaught ReferenceError: Raphael is not defined g.raphael.js:7
Uncaught ReferenceError: Raphael is not defined g.bar.js:7
Uncaught ReferenceError: Raphael is not defined barchart2.html:13

从我的服务器加载脚本时，我尝试了一些更改：

<script src="js/raphael.js"></script>
<script src="js/g.raphael.js"></script>
<script src="js/g.bar.js"></script>

但是当我这样做时，我会遇到这个烦人的问题：

在此处输入图像描述

我还更改了 CSS 行：

<link rel="stylesheet" href="http://g.raphaeljs.com/demo.css" media="screen">
<link rel="stylesheet" href="http://g.raphaeljs.com/demo-print.css" media="print">

任何想法如何解决这个问题？

4

1 回答 1

0

这是一个工作版本，一个完整的 html 文件源......（使用 jQuery 加载准备好的页面）

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://raphaeljs.com/raphael.js" ></script>
<script type="text/javascript" src="http://g.raphaeljs.com/g.raphael.js" ></script>
<script type="text/javascript" src="http://g.raphaeljs.com/g.bar.js" ></script>

</head>
<body>


<script language="javascript" type="text/javascript" defer>
$(function() {
   var r = Raphael("holder"),
                    fin = function () {
                        this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
                    },
                    fout = function () {
                        this.flag.animate({
                            opacity: 0
                        }, 300, function () {
                            this.remove();
                        });
                    },
                    fin2 = function () {
                        var y = [],
                            res = [];
                        for (var i = this.bars.length; i--;) {
                            y.push(this.bars[i].y);
                            res.push(this.bars[i].value || "0");
                        }
                        this.flag = r.popup(this.bars[0].x, Math.min.apply(Math, y), res.join(", ")).insertBefore(this);
                    },
                    fout2 = function () {
                        this.flag.animate({
                            opacity: 0
                        }, 300, function () {
                            this.remove();
                        });
                    },
                    txtattr = {
                        font: "12px sans-serif"
                    };

                r.text(160, 10, "Single Series Chart").attr(txtattr);
                r.text(480, 10, "Multiline Series Stacked Chart").attr(txtattr);
                r.text(160, 250, "Multiple Series Chart").attr(txtattr);
                r.text(480, 250, "Multiline Series Stacked Chart\nColumn Hover").attr(txtattr);

                r.barchart(10, 10, 300, 220, [
                    [55, 20, 13, 32, 5, 1, 2, 10]
                ]).hover(fin, fout);
                r.hbarchart(330, 10, 300, 220, [
                    [55, 20, 13, 32, 5, 1, 2, 10],
                    [10, 2, 1, 5, 32, 13, 20, 55]
                ], {
                    stacked: true
                }).hover(fin, fout);
                r.hbarchart(10, 250, 300, 220, [
                    [55, 20, 13, 32, 5, 1, 2, 10],
                    [10, 2, 1, 5, 32, 13, 20, 55]
                ]).hover(fin, fout);
                var c = r.barchart(330, 250, 300, 220, [
                    [55, 20, 13, 32, 5, 1, 2, 10],
                    [10, 2, 1, 5, 32, 13, 20, 55]
                ], {
                    stacked: true,
                    type: "soft"
                }).hoverColumn(fin2, fout2);
                });
</script>
<div id="holder"></div>
</body>
</html>
于 2013-03-07T12:36:28.453 回答