Код динамической круговой диаграммы G.Raphael не работает

Question

Код динамической круговой диаграммы G.Raphael не работает

0

Я новичок в Рафаэле, поэтому я пытаюсь изучить некоторые вещи с помощью доступных учебных пособий.

Я столкнулся с проблемой, когда я просто копирую/вставляю исходный код с сайта Рафаэля: http://g.raphaeljs.com/piechart2.html

Я щелкнул правой кнопкой мыши, чтобы увидеть исходный код, и я копирую/вставляю его в notepad++. Я добавил необходимые файлы 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="/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>

Игнорируйте "прокомментированные строки", это я пытался отладить мою проблему. Я получаю фон, но диаграмма просто не отображается.

Любая помощь будет оценена по достоинству.

user3533253 14 апр. 2014, в 21:02

Источник

0

Вы проверили свою консоль?
Easwar Raju 27 июнь 2014, в 07:57

Теги:

javascript

html

css

charts

raphael

2 ответа

Ещё вопросы

Shoaib Shaikh · Answer 1 · 2014-06-27T05-34-00.000Z

Вы должны проверить настройки своего браузера для элементов управления Active x. При попытке загрузить страницу может появиться приглашение браузера. Что-то вроде:-

"Чтобы защитить вашу безопасность, Internet Explorer ограничил эту страницу запущенными скриптами или элементами управления ActiveX, которые могли бы получить доступ к вашему компьютеру. Нажмите здесь для получения параметров..." Вам нужно нажать на сообщение и выбрать option- "Разрешить заблокированное содержимое",

Поскольку я не вижу никаких проблем с созданием холста или с координатами.

Reggie Pinkham · Answer 2 · 2014-06-17T08-39-00.000Z

Дайте размеры холста.

Вместо:

var r = Raphael("holder"),

Попробуйте использовать:

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