Визуализация данных и рисование на JavaScript.

Starkark

Заблокирован
Сообщения
0
Симпатии
0
Баллы
0
Всем привет! В этой статье мы рассмотрим очень интересную и мощную библиотеку для визуализации данных и рисования с интуитивным API.
Что такое GraphicsJS
GraphicsJS
– это легковесная javascript библиотека с интуитивным API, базирующаяся на SVG/VML технологии.
Чтобы понять, что может эта библиотека, перейдите на http://www.graphicsjs.org/ и прямо на главной странице вы увидите несколько примеров. Ниже на странице вы можете найти Playground, где вы также найдете много самых разных примеров и сможете сами пописать код, чтобы лучше изучить работу библиотеки.

В чем ее особенности
  • Великолепный JavaScript API – на основе логики слоев и в сочетании с простыми примитивами GraphicsJS API позволит вам создавать любые визуализации, которые вы только можете себе вообразить
  • Виртуальный DOM – это абстракция HTML DOM. Легковесная, отделенная от браузерной спецификации имплементация детализирует и обеспечивает лучшую производительность при отрисовке
  • Богатые возможности работы с текстом – вы можете управлять оберткой текста, переполнением текста, его отступами, высотой, межбуквенным расстоянием, вертикальным и горизонтальным выравниванием внутри SVG/VML выходом, произведенным с помощью GraphicsJS
  • Работает по всему миру как часть AnyChart продуктов, GraphicsJS была протестирована на всех устройствах и браузерах – компьютеры на Windows, Macs, iPhones, iPads, Android. Это работает везде, включая IE6
Быстрый старт
1) Создайте HTML файл. Подключите AnyChart на вашу страничку:

Код:
<head>
<script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://cdn.anychart.com/css/latest/anychart-ui.css">
</head>
2) Создайте контейнер для диаграммы:

Код:
<body>
<div id="container" style="width: 500px; height: 400px;"></div>
</body>
3) Создайте диаграмму. Поместите тег <script> со следующим кодом где-нибудь в <head> или <body> разделах. Этот пример кода использует JavaScript API, чтобы создать диаграмму, но вы можете также использовать JSON или XML форматы.

Код:
<script>
anychart.onDocumentLoad(function() {
// create an instance of a pie chart with data
var chart = anychart.pie([
["Chocolate", 5],
["Rhubarb compote", 2],
["Crêpe Suzette", 2],
["American blueberry", 2],
["Buttermilk", 1]
]);
chart.title("Top 5 pancake fillings");
// pass the container id, chart will be displayed there
chart.container("container");
// call the chart draw() method to initiate chart display
chart.draw();
});
</script>