Визуализация данных и рисование на JavaScript.
Всем привет! В этой статье мы рассмотрим очень интересную и мощную библиотеку для визуализации данных и рисования с интуитивным API.
Что такое GraphicsJS
GraphicsJS – это легковесная javascript библиотека с интуитивным API, базирующаяся на SVG/VML технологии.
Чтобы понять, что может эта библиотека, перейдите на официальный сайт и прямо на главной странице вы увидите несколько примеров. Ниже на странице вы можете найти 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>
Более подробную информацию вы можете получить в разделе документация.
Думаю, вы точно найдете применение такой замечательной библиотеке, как эта!
А на этом у меня все. Спасибо за внимание!
-
Создано 03.10.2016 11:07:57
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.