PlotKit для Canvas HTML5 и SVG

Развитие HTML5 Canvas и SVG продолжается, и это не должно быть сюрпризом, что начали появляться библиотеки, которые превращают наши данные в визуальную красивую HTML диаграмму.

Одной из таких библиотек, являться PlotKit, который поддерживает Canvas HTML5 и SVG с помощью Adobe SVG Viewer, а также эмулирует Canvas для Internet Explorer.

PlotKit можно использовать для коммерческих приложений, не боясь преследования! Но это не главное, нужно знать как использовать PlotKit для приложений. В этом уроке всё что нужно знать что применить для своего приложения PlotKit.

Canvas против SVG

Что бы иметь более подробное представление об этом, прочтите статью сравнение HTML5 Canvas и SVG . Напомним, что SVG является вектором, состоит из файлов XML, и лучше всего походит для рисования текста, в то время как canvas манипулирует пикселями, представляет собой чистый сценарий, и лучше всего подходит для динамического построения диаграмм. Canvas работает в браузерах: Opera 9, Safari 2 и Firefox 1.5, в то время как SVG понимает IE 9, Firefox 14, Chrome 21, Safari 6, и Opera 12. PlotKit использует эмуляцию Canvas для IE т.е работает в любом Internet Explorer.

Пример Canvas PlotKit

PlotKit требуется четыре собственные файлы скриптов. Библиотека MochiKit, на которой построен PlotKit:



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Визуальная красивая диаграмма PlotKit</title>

<script type="text/javascript" src=
http://pixelcom.crimea.ua/"/mochikit/MochiKit.js"></script>
<script type="text/javascript" src=
http://pixelcom.crimea.ua/"/plotkit/Base.js"></script>
<script type="text/javascript" src=
http://pixelcom.crimea.ua/"/plotkit/Layout.js"></script>
<script type="text/javascript" src=
http://pixelcom.crimea.ua/"/plotkit/Canvas.js"></script>
<script type="text/javascript" src=
http://pixelcom.crimea.ua/"/plotkit/SweetCanvas.js"></script>

</head>
<body>

<div><canvas id="chart" height="400" width="650"></canvas></div>

</body>
</html>


Нужно добавить тег <canvas>, где вы хотите что бы появилась графика. Обратите внимание, что PlotKit обязательно требует тег <canvas>, в блоке <div>.

Например:



<div><canvas id="chart" height="400" width="650"></canvas></div>


Визуальная красивая диаграмма PlotKit
Визуальная красивая диаграмма PlotKit

Рисование диаграмм может быть выполнено в два этапа: сначала нужно создать макет с данными:



//создать новый макет объекта, и указать ему, что мы хотим, диаграммы var layout = new PlotKit.Layout("bar", {});

  //добавить новый набор данных для макета
  //(Вы можете добавить несколько наборов данных путем указания другого имени, в первом параметре для каждого набора данных)

   layout.addDataset('monthlyData', [[0,12],[1,13],[2,16],[3,15],[4,16],[5,19],[6,19],[7,12],[8,23],[9,16],[10,13],[11,24]]);

  //укажите макет для расчета макет диаграммы layout.evaluate();



Второй шаг заключается в создании визуализации:



//добавить canvas элемент var canvas  = MochiKit.DOM.getElement("chart");

  //создание визуализации для работы на холсте объект, используя наш макет и данных

   var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});

  //сделать график!
  plotter.render();


Лучше подождать пака загрузится страница, а потом пусть появляются диаграммы, правильно код поместить с методом ленивой загрузки MockiKit.DOM.adOnloadEvent() :



MochiKit.DOM.addLoadEvent(function() {
    var layout = new PlotKit.Layout("bar", {});
    //...
});


Дополнительные опции

Вы наверное заметили, что в коде пустой объект ({}) в качестве второго аргумента в Layout() конструктора SweetCanvasRenderer() . Он разделяет опции для каждого варианта. Их слишком много, чтобы перечислить все, но есть несколько полезных, которые действительно могут повлиять на внешний вид вашей диаграммы:



var options = {
 "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[4]),
 "padding": {left: 30, right: 0, top: 10, bottom: 30},
 "xTicks": [{v:0,  label:"Jan"},
            {v:1,  label:"Feb"},
            {v:2,  label:"Mar"},
            {v:3,  label:"Apr"},
            {v:4,  label:"May"},
            {v:5,  label:"Jun"},
            {v:6,  label:"Jul"},
            {v:7,  label:"Aug"},
            {v:8,  label:"Sep"},
            {v:9,  label:"Oct"},
            {v:10, label:"Nov"},
            {v:11, label:"Dec"}],
 "barWidthFillFraction": 0.55,
 "yAxis": [0, 25]
};
MochiKit.DOM.addLoadEvent(function() {
  var layout = new PlotKit.Layout("bar", options);
  //...
  var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, options);
  //...
});


  • ColorScheme — управляет цветами линии, бары, круги диаграммы но не фона. Он принимает одно из «MochiKit.Color.Color» определено в массив PlotKit.Base.palette.
  • padding относится к графике. Это объект со свойствами сверху, снизу, слева, справа в пикселях.
  • XTicks на самом деле делает две вещи. Как массив {label: «somelabel», v:value} объектов, он устанавливает свойство по оси X, а также связанных с ними меток. Я использовал его, чтобы установить название месяца.
  • BarWidthFillFraction определяет объем пространства, сколько каждый бар должен потреблять в значении X. Таким образом, числа до 1 создаст тонкие бары, в то время как свыше 1 создает широкие.
  • YAxis устанавливает минимальные и максимальные значения по оси Y, с помощью массива из 2 чисел с плавающей точкой.

Заключение

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>