Не получается прикрутить графики

275

04 апреля 2017, 09:39

Мне нужно научиться строить графики. Для этого я загуглил несколько библиотек и выбрал из найденных то, что мне показалось проще: uvharts. В javascript я практически не разбираюсь. По логике должно всё отображаться. Но по факту ничего. В качестве справочной документации использовал документы на сайте uvcharts. После того, как у меня ничего не прикрутилось, решил чуть погуглить примеров. Нашёл вот это видео. Здесь всё то же самое. Но зачем-то берутся библиотеки с d3js.org. Окей, взял и их. Но ничего не поменялось. В итоге, имею следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script src = 'vendor/d3/d3.min.js'></script>
        <script src = 'vendor/uvcharts-1.1.0/uvcharts.min.js'></script>
        <script type = 'text/javascript'>
            var init  = function () {
                var graphdef = {
                    categories: ['uvCharts'];
                    dataset: { 
                        'uvCharts': [
                            {name: '2009', value: 67},
                            {name: '2010', value: 97},
                            {name: '2011', value: 120},
                            {name: '2012', value: 167},
                            {name: '2013', value: 234}
                        ]
                    }
                }
                var chartObject = uv.chart('Bar', graphdef);
            };
        </script>
    </head>
    <body onload = 'init()'>
        <div id = 'uv-div'></div>
    </body>
</html>

Все скрипты в папке vendor имеются:

В связи с этим имею вопросы:

Не понимаю, отчего не происходит визуализация графика.
Для чего подключать библиотеку d3js.org?

Answer 1

1: У вас синтаксические ошибки в коде

2: Uvcharts новыми версиями d3 (4.*) работать отказывается, у меня завелось, когда я подключил 3.2.2

Вот так всё завелось:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script src = 'http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js'></script>
        <script src = 'http://imaginea.github.io/uvCharts/js/uvcharts.js'></script>
    </head>
    <body>
        <div id = 'uv-div'></div>
        <script type = 'text/javascript'>
            var graphdef = {
                categories: ['uvCharts'],
                dataset: {
                    'uvCharts': [
                        {name: '2009', value: 67},
                        {name: '2010', value: 97},
                        {name: '2011', value: 120},
                        {name: '2012', value: 167},
                        {name: '2013', value: 234}
                    ]
                }
            }
            uv.chart('Bar', graphdef);
        </script>
    </body>
</html>