Урок 13 — Добавление интерактивной диаграммы на сайт

Диаграмма
В этом уроке мы добавим интерактивную диаграмму на наш сайт.

1 шаг

Воспользуемся ссылкой, которую дал Алексей Андреевич специально для этого задания.
Выберем понравившуюся библиотеку (я выбрал ECharts) и читаем инструкцию к ней.
Так, для добавления диаграммы на Echarts необходимо просто подключить скрипт и указать настройки.

<body>
    <!-- Подготовка места с размерами (ширина и высота) для ECharts -->
    <div id="main" style="height:400px"></div>  
    <!-- Импорт ECharts -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // конфигурация
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // use
        require(
            [
                'echarts',
                'echarts/chart/bar' // require the specific chart type
            ],
            function (ec) {
                // Запуск после создания "места"
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true //показывать
                    },
                    legend: {
                        data:['Sales'] //легенда
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["Shirts", "Sweaters", "Chiffon Shirts", "Pants", "High Heels", "Socks"] //категории
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"Sales",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20] //значения продаж
                        }
                    ]
                };
        
                // Load data into the ECharts instance 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

В итоге получаем нечто такое:

Урок окончен.