Джош из ZingSoft

Это первый пост из серии Возможности секундомера ZingChart. Цель этой серии — осветить многие функции ZingChart, которые можно быстро внедрить, чтобы сделать ваши диаграммы динамичными, интерактивными и анимированными.

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

В качестве краткого руководства, вот пункты, которые я использую, чтобы оживить вашу линейную диаграмму:

  1. Создайте базовый макет HTML, который будет отображать вашу диаграмму
  2. Добавьте объект в свой Javascript, чтобы содержать ваши данные, свойства и анимацию.
  3. Вызовите ZingChart, чтобы отобразить диаграмму на вашей странице.

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

Прежде чем я начну…

Я настоятельно рекомендую подписаться на бесплатное веб-приложение ZingChart, «ZingSoft Studio».

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

Заходи в студию и начинай составлять графики!

Создание вашего макета

Для начала вам нужно будет создать базовый HTML-макет. Не стесняйтесь копировать приведенный ниже.

<!DOCTYPE html>
<html>
   <head>
   <meta charset="utf-8">
   <title>Line Chart Animation Demo</title>
   <script src="<https://cdn.zingchart.com/zingchart.min.js>">
</script>
   </head>
   <body>
      <div id='myChart'></div>
   </body>
</html>

Обратите внимание, что я уже включил тег script, который ссылается на CDN ZingChart, а также div для отображения диаграммы.

Добавление вашего Javascript

После того, как вы закончите настройку своего HTML, вы захотите добавить свой Javascript.

Либо создайте тег script ниже, где вы настраиваете свою диаграмму div, либо укажите ссылку на новый файл Javascript. Хотя я буду только поверхностно рассматривать возможности ZingChart, единственные два компонента Javascript, которые вы добавите для анимации диаграммы, — это переменная и метод рендеринга.

Создание вашей переменной

Вы начнете с создания и именования переменной как объекта в файле Javascript или теге script. Внутри этого объекта вы захотите включить 3 основных свойства: type, series и plot.

Ссылка на формат ниже.

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
		
   }
};

Свойство type указывает, какой тип диаграммы вы хотите использовать. ZingChart имеет более 35 типов диаграмм, но в этом посте я буду рассматривать линейные диаграммы, поэтому свойство type имеет значение свойства line.

Свойство series — это место, где вы будете хранить свои данные, изменять цвета линий, добавлять эффекты наведения и многое другое, о чем вы можете прочитать здесь. Обратите внимание на форматирование свойства series. Чтобы добавить несколько линий графика, я создал series массив с несколькими объектами в качестве свойств.

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

Добавление анимации

Чтобы анимировать вашу визуализированную диаграмму, достаточно просто добавить еще несколько свойств к вашему объекту plot.

Первое, что вам нужно сделать, это дать вашему объекту plot свойство с именем animation. animation — это объект, который принимает все свойства ZingChart, используемые для анимации вашей диаграммы.

Первым свойством, которое вы добавите к animation, будет effect. Это может принимать либо строку, либо число в качестве значения. Для целей этой демонстрации я буду использовать числа. Ваш основной объект должен выглядеть так, как показано ниже, но попробуйте изменить значения с любым числом от 1 до 13. Я предоставил характеристики анимации для значений от 1 до 13 ниже.

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect":1
      }
   }
};
  • 1 = Постепенное появление
  • 2 = расширить по вертикали от центра
  • 3 = расширить сверху
  • 4 = расширить снизу
  • 5 = развернуть слева направо
  • 6 = расширять справа налево
  • 7 = расширить по горизонтали от центра
  • 8 = Слайд слева
  • 9 = Слайд справа
  • 10 = Скользить сверху
  • 11 = Скольжение снизу
  • 12 = Развернуть по горизонтали
  • 13 = Развернуть по вертикали

Следующее свойство, которое вы можете добавить к animation, это sequence. Это свойство может принимать значения от 1 до 3.

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

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect": 1,
         "sequence": 1
      }
   }
};
  • 1 = линии отображаются по группам графиков
  • 2 = линии отображаются по группе узлов
  • 3 = линии отображаются отдельными узлами

Наконец, speed — это свойство, определяющее общую скорость анимации. Попробуйте использовать значения от 1 до 100.

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect": 1,
         "sequence": 1, 
         "speed": 10
      }
   }
};

Визуализация вашей диаграммы

Последний фрагмент кода Javascript, который вам нужно добавить, — это метод zingchart.render().

После добавления ваш полный файл Javascript должен выглядеть так:

var myConfig = {
   "type": "line",
   "series": [
      {"values": [20,40,25,50,15,45,33,34] },
      {"values": [5,30,21,18,59,50,28,33] },
      {"values": [30,5,18,21,33,41,29,15] }
   ],
   "plot": {
      "animation": {
         "effect": 1,
         "sequence": 1, 
         "speed": 10
      }
   }
};
zingchart.render({
   id: 'myChart',
   data: myConfig,
   height: "100%",
   width: "100%"
});

Что касается анимации, вы закончили!

Существует множество различных комбинаций effect sequence и speed, которыми вы можете воспользоваться. Я рекомендую вам поиграть с различными комбинациями, чтобы увидеть, что лучше всего соответствует вашим потребностям. Есть также много других свойств, которые вы можете включить в объект plot, чтобы добавить интерактивности к вашей диаграмме. Вы можете поиграть с этим демо здесь.

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