Скрипт JavaScript для вывода диаграмм

AwesomeChartJS - библиотека JavaScript для создания диаграмм с использованием элемента HTML5 <canvas>.

Библиотека самодостаточна и не требует подключения никаких дополнительных библиотек.

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

Описание

Допустим, нужно создать график для отображения следующих данных о продажах:

Product Sales - 2010 (Продажи за 2010 год)

  • Desktops: 1532
  • Laptops: 3251
  • Netbooks: 3460
  • Tablets: 1180
  • Smartphones: 6543

Сначала надо определить элемент canvas в документе HTML:

<canvas id="canvas1" width="300" height="300">
    Ваш веб браузер не поддерживает элемент HTML 5 canvas.
</canvas>

Затем нужно присоединить к документу awesomechart.js, создать новый объект AwesomeChart и передать ему данные:

<script type="application/javascript" src="awesomechart.js"></script>
                        
    <script type="application/javascript">
      function drawMyChart(){
        if(!!document.createElement('canvas').getContext){ //Проверяем поддержку элемента canvas
            var mychart = new AwesomeChart('canvas1');
            mychart.title = "Product Sales - 2010";
            mychart.data = [1532, 3251, 3460, 1180, 6543];
            mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"];
            mychart.draw();
        }
      }
      
      window.onload = drawMyChart;
    </script>
                 

 

Выше приведенный код выдаст следующий результат:

Столбцовая диаграмма

Для изменения типа диаграммы нужно указать ее тип до вызова функции draw():

mychart.chartType = 'doughnut';
mychart.draw();
                  

Кольцевая диаграмма

Свойство chartType позволяет задавать тип отображаемой диаграммы:

Горизонтальная столбцовая диаграмма
по умолчанию
Вертикальная столбцовая диаграмма
horizontal bars
Диаграмма Паретто
pareto
Круговая диаграмма
pie
Разъединенная круговая диаграмма
exploded pie
Кольцевая диаграмма
doughnut

Файл демонстрации содержит подробные и наглядные примеры. Для диаграмм можно использовать разные цвета.

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 15 Февраля 2011 16:29
    Zedamin
    Спасибо, интересно.
  • 15 Февраля 2011 16:36
    eugeny007
    Спасибо!
    http://htmlbook.ru/html/canvas и http://webew.ru/articles/190.webew
  • 19 Августа 2011 21:07
    К. Александр
    Круто
    • 19 Августа 2011 21:08
      alik.kudryashov
      ага
  • 14 Марта 2015 01:10
    vlad_punk
    15 лучших <a href="http://infoblog1.ru/learn/web/javascript/15-luchshix-bibliotek-diagrammam" title="билиотеки для отрисовки диаграммам на JavaScrit">библиотек</a> с диаграммами от JavaScrit.
^ Наверх ^