Эта статья была спонсирована ZingChart . Спасибо за поддержку спонсоров, которые делают возможным использование SitePoint.
Предположим, что, как разработчик внешнего интерфейса, вы столкнулись с диаграммой или панелью мониторинга, которую хотели бы визуально включить в свой проект, но у вас нет времени, чтобы проделать большую работу и развернуть собственное решение для построения диаграмм. ,
Эта гипотетическая ситуация является отличным примером для интерфейсной среды JavaScript, такой как Angular, потому что она позволяет вам создать быструю «готовую к работе» демонстрацию с минимальным количеством кода. Вы все еще можете быть в недоумении, особенно если вы не специалист по Angular. Даже с помощью такого инструмента для создания прототипов, как Angular, создание интерактивной диаграммы или панели мониторинга может занять много времени. К счастью, есть директива ZingChart Angular, которая делает построение сложных Data Vizzes с HTML5 и JavaScript простой и легкой задачей.
Начиная
Чтобы продемонстрировать, насколько просто использовать Angular и ZingChart , мы собираемся создать интерактивный набор данных, используя некоторую информацию из Best Site Framework 2015 для 2015 SitePoint Survey .
Но прежде чем мы это сделаем, давайте кратко рассмотрим простую демонстрацию, показывающую, как настроить линейный граф с помощью Angular и директивы ZingChart.
В демонстрации выше мы добавляем на страницу библиотеки Angular, ZingChart и ZingChart-angularJS. Все эти три сценария необходимы для обеспечения отображения диаграммы. Наш HTML очень прост. Все, что мы делаем, это маркируем контейнер и контроллер для приложения, внутри которого находится наш элемент.
У нас есть четыре строки JavaScript для рендеринга данных. Первый загружает приложение Angular и объявляет директиву ZingChart как зависимость, а второй вводит данные в модель приложения. В этом случае нашими данными является следующий массив: [1,4,5,5,10]
Построение набора данных обследования
Чтобы построить диаграмму для опроса PHP, мы разработали оригинальную демоверсию . Затем, поскольку наши данные будут в форме гистограммы, мы собираемся добавить атрибут zc-json элемент, при удалении атрибута zc-data Это делается для того, чтобы мы могли передавать наши данные в виде объекта JSON.
<zingchart id="chart-1" zc-json="spData"></zingchart>
В нашем JavaScript собирались удалить $scope.myData = ...
$scope.spData = {
type : 'bar3d',
series:[{
text: 'foo',
backgroundColor : "#FAEE00",
values: [1,4,5,5,10]
},
{
text: 'bar',
backgroundColor : "#A0FFEE",
values : [9,3,4,5,6]
} ]
};
Здесь мы обновляем область для включения объекта spData, где он затем может быть внедрен в DOM. Этот объект является нашим основным источником данных и конфигурации. Есть много атрибутов, которые мы можем добавить к графику, включая легенды, заголовки осей X и Y, субтитры и многое другое. Взгляните на код, используемый для генерации готового графика угловых точек ZingChart SitePoint. Мне было довольно легко вставить быструю анимацию, которая была такой же простой, как копирование быстрого примера из учебника в документации. В целом, когда у вас есть элемент и исходный Angular JavaScript на месте, построить диаграмму так же просто, как добавить атрибуты JSON в ваш объект zc-json Там действительно больше нечего перейти. Мне очень нравится, что это такой простой продукт.
Я не большой пользователь Angular, и я впервые использую ZingChart. Тем не менее, я смог построить сложный график за считанные минуты. Я использовал их документы и интерактивную демонстрацию, чтобы помочь мне в этом, и мне не нужно было искать много. Все хорошо задокументировано, и мне не нужно было делать никаких предположений. Если вы заинтересованы в создании собственного примера ZingChart, вы можете начать здесь .
Вывод
Как видите, создание интерактивного набора данных с помощью Angular и ZingChart может быть простой и легкой задачей. Вы можете не только создать простой график за несколько минут, но и настроить его по своему вкусу, с минимальным количеством кода. В следующий раз, когда вам нужно будет создать быстрый прототип или демонстрацию с интерактивным набором данных, переходите к комбинированию Angular + ZingChart.