Джош Ариас

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

Посмотрите видео ниже, чтобы увидеть, как легко это можно сделать. Для пошагового просмотра прокрутите видео до содержимого ниже.

В этой статье я рассмотрю 3 основных пункта:

1. Добавление HTML-кода, содержащего вашу диаграмму
2. Использование Javascript и ZingChart для добавления данных, свойств и анимации
3. Визуализация диаграммы Gauge на странице

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

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

Каждый раз, когда я экспериментирую с библиотекой ZingChart, я всегда делаю это в их бесплатном веб-приложении «ZingSoft Studio».

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

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

1. Добавление вашего HTML

Чтобы начать этот процесс, вам нужно будет создать базовый HTML-макет, если вы еще этого не сделали. Не стесняйтесь копировать тот, который у меня есть ниже.

<!DOCTYPE html>
<html>
 <head>
   <meta charset=”utf-8">
   <title>ZingSoft Demo</title>
   <script src=”https://cdn.zingchart.com/zingchart.min.js"></script>
 </head>
 <body>
   <div id=”myChart” class=”chart — container”></div>
 </body>
</html>

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

Я также включил div в тело HTML, который будет отображать диаграмму. Этот div также включает предопределенный класс с именем chart — container. Ссылка здесь, чтобы увидеть основные классы CSS, добавленные в эту диаграмму.

Что касается настройки HTML, все готово!

2. Добавление JavaScript

Теперь, когда вы закончили настройку моего HTML, вы потратите оставшееся время на использование и создание JavaScript.

Для начала вы можете либо настроить скрипт под начальной настройкой вашего div, либо вы можете сослаться на внешний документ JavaScript.

ZingChart — чрезвычайно мощная и сложная библиотека. Для целей этой демонстрации вы будете использовать только несколько доступных свойств. Полный список свойств JSON, доступных через ZingChart, см. на странице Атрибуты JSON.

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

var chartConfig = {
  type: ‘gauge’,
  series: [
    {
      text: ‘Day 1’,
      values: [23],
      backgroundColor: ‘#00384A’
    },
    {
      text: ‘Day 2’,
      values: [20],
      backgroundColor: ‘#008ECC’
    },
    {
      text: ‘Day 3’,
      values: [25],
      backgroundColor: ‘#06C5FC’
    }
  ],
  plot: {
  },
};

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

Свойство series является следующим элементом вашего объекта chartConfig. В этом свойстве будут храниться все ваши данные и стили данных. Здесь есть множество функций, которые вы включаете, чтобы добавлять состояния наведения, маркеры легенд, всплывающие подсказки, поля значений и многое другое непосредственно к вашим точкам данных.

Вы захотите следовать формату, который я создал выше, чтобы убедиться, что три иглы добавлены к графику.

plot будет использоваться в следующем разделе для добавления анимации к вашему графику.

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

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

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

В объекте animation первым включенным свойством будет effect. Эффект может принимать либо строку, либо число (1 или 2) в качестве значения.

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

var chartConfig = {
  type: ‘gauge’,
    series: [
      {
        text: ‘Day 1’,
        values: [23],
        backgroundColor: ‘#00384A’
      },
      {
        text: ‘Day 2’,
        values: [20],
        backgroundColor: ‘#008ECC’
      },
      {
        text: ‘Day 3’,
        values: [25],
        backgroundColor: ‘#06C5FC’
      }
    ],
    plot: {
      animation: {
      effect: 2
    }
  }
};

Ниже приведены характеристики анимации для свойства effect:

  • 1 = Постепенное появление
  • 2 = Повернуть слева направо
…,
  plot: {
    animation: {
      effect: 2,
      sequence: 1
    }
  }
…
  • 1 = визуализирует отдельные узлы
  • 2 = отображает все узлы одновременно
…,
  plot: {
    animation: {
      effect: 2,
      sequence: 1,
      method: 1
    }
  }
…

Следующее свойство анимации, которым вы можете воспользоваться, — это свойство method. method определяет, как узлы ведут себя в конце анимации, и может применяться только тогда, когда effect: 2 активен. Это свойство принимает значения от 1 до 5.

Лучший способ понять method — попробовать самому.

Вот характеристики для каждого значения:

  • 1 = узел долго прыгает в конце анимации
  • 2 = узел имеет более быстрый отскок в конце анимации
  • 3 = У узла очень быстрый отскок в конце анимации
  • 4 = узел замедляется ближе к концу анимации
  • 5 = Узел замедляется еще больше к концу анимации
  • 6 = Узел поддерживает постоянную скорость на протяжении всей анимации

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

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

В этом встроенном методе вы захотите включить id, который был включен в div в ваш HTML. Это то, что отображает диаграмму в ваш HTML.

В дополнение к этому вам необходимо сослаться на переменную JavaScript, которую вы создали ранее. Это можно сделать, добавив свойство data и установив его значение в имя переменной. В этом случае вы установите его на chartConfig.

К этому объекту можно добавить два дополнительных свойства: height и width. Эти свойства принимают числовые значения, как и обычные свойства CSS.

Теперь ваш JavaScript должен выглядеть так:

var chartConfig = {
  type: ‘gauge’,
  series: [
    {
      values: [23],
      backgroundColor: ‘#00384A’
    },
    {
      values: [20],
      backgroundColor: ‘#008ECC’
    },
    {
      text: ‘Day 3’,
      values: [25],
      backgroundColor: ‘#06C5FC’
    }
  ],
  plot: {
    animation: {
      effect: 2,
      sequence: 1,
      method: 1
    }
  }
};
 
zingchart.render({
  id: ‘myChart’,
  data: chartConfig,
  height: ‘100%’,
  width: ‘100%’,
});

Существует множество различных комбинаций effect method и sequence, которые вы можете реализовать. Есть также другие свойства, которые вы можете добавить к объекту plot, такие как speed и delay. Чтобы узнать больше об этом, посетите ZingChart Animation docs.

Чтобы ознакомиться с более индивидуальной версией этой диаграммы, ознакомьтесь с демо. Не стесняйтесь расширять, редактировать и настраивать демо с вашим собственным дизайном и данными!

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

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