Джош из ZingSoft

Линейная диаграмма или график — это очень эффективный способ отображения точек данных, соединенных линиями. Очень универсальные линейные диаграммы бывают трех разных типов: простые линейные диаграммы, трехмерные линейные диаграммы и вертикальные линейные диаграммы.

Эта статья покажет вам, как:

  1. Ссылка на библиотеку ZingChart
  2. Поместите диаграмму на HTML-страницу
  3. Добавьте данные и визуализируйте свою диаграмму
  4. Базовая настройка вашего графика

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

Прежде чем приступить к моему руководству, я настоятельно рекомендую зарегистрироваться в бесплатном веб-приложении ZingChart Studio. Это настраиваемая интегрированная среда, похожая на песочницу, где вы можете тестировать и создавать диаграммы, а затем делиться ими, когда закончите. Он также предоставляет готовые начальные шаблоны для большинства встроенных типов диаграмм, поэтому вам никогда не придется начинать с нуля.

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

1. Ссылка на библиотеку ZingChart

На странице HTML укажите ссылку на библиотеку ZingChart в разделе <head> документа, добавив вызов библиотеки <script>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingChart: My Line Chart</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
  </body>
</html>

Мы ссылались на код из нашей сети доставки контента (CDN), но вы также можете загрузить библиотеку ZingChart или использовать менеджер пакетов, например NPM.

2. Размещение диаграммы на странице

Прежде чем добавлять данные в линейный график, вам нужно указать ZingChart, где отображать график, указав его в <body> вашего кода:

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

Создайте контейнер <div> в <body> вашей HTML-страницы и присвойте ему уникальный id, на который вы будете ссылаться при отображении диаграммы. Простой!

3. Добавление данных и визуализация диаграммы

Здесь требуются некоторые знания JavaScript.

В самом простом методе определение данных и их добавление на диаграмму выполняются встроенными в тег <script>.

Сначала вы назначаете свои данные и конфигурацию диаграммы переменной, а затем ссылаетесь на нее в методе рендеринга:

<script>
  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] }
    ]
  };
 
  zingchart.render({ 
    id: 'myChart',
    data: myConfig,
    height: '100%',
    width: '100%'
  });
</script>

Попробуйте добавить приведенный выше код в <body>своей HTML-страницы. Если вы запустите это в своем браузере, у вас будет полностью функционирующая линейная диаграмма!

Примечание. При добавлении тега <script> убедитесь, что он размещен после тега <div id="myChart">, на который ссылается диаграмма.

Ознакомьтесь с демонстрацией полной линейной диаграммы.

Так что же именно происходит выше?

Сначала была создана переменная myConfig для хранения данных графика и настроек конфигурации.

var myConfig = {
  type: 'line',
  series: [
    { values: [20,40,25,50,15,45,33,34] }, // Line 1
    { values: [5,30,21,18,59,50,28,33] },  // Line 2
    { values: [30,5,18,21,33,41,29,15] }   // Line 3
  ]
};

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

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

Наконец, метод zingchart.render() строит диаграмму и добавляет код в указанный контейнер div.

zingchart.render({  // Render method to show chart on page
  id: 'myChart',    // Reference the id of your <div> container
  data: myConfig,   // Reference the 'myConfig' settings object
  height: '100%',   // Set the height of the chart
  width: '100%'     // Set the width of the chart
});

Он принимает объект, который имеет 4 свойства:

  1. id
  2. data
  3. height
  4. width

height и width необязательны, если вы предпочитаете управлять размерами с помощью CSS.

Обратитесь к комментариям // выше для получения дополнительной информации о том, что они делают.

4. Базовая настройка вашего линейного графика

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

Переход к варианту линейной диаграммы

Ранее мы видели, что установка для свойства type значения line в объекте конфигурации отображала наши данные в виде линейной диаграммы. Есть несколько других значений, которые вы можете указать type, которые будут отображать данные по-другому, без необходимости изменять структуру данных:

  1. line3d — придает вашим линиям трехмерный вид.
  2. vline - Поворачивает ваш график вертикально, а не горизонтально.

Установка аспекта сюжета

Если вы включите свойство с именем plot и присвоите ему значение объекта со свойством aspect, вы измените способ отображения самих линий:

  1. segmented — разделяет точки данных соединенными прямыми линиями
  2. spline — разделяет точки данных соединенными кривыми линиями
  3. stepped — разделяет точки данных вертикальными и горизонтальными линиями, напоминающими шаги
  4. jumped — точки данных разделяются только горизонтальной частью ступенчатой ​​линии.
var myConfig = {
  type: 'line',
  plot: {
    aspect: 'segmented'
  },
  series: [
    { values: [20,40,25,50,15,45,33,34] }, // Line 1
    { values: [5,30,21,18,59,50,28,33] },  // Line 2
    { values: [30,5,18,21,33,41,29,15] }   // Line 3
  ]
};

Изменение стиля линий

Чтобы независимо изменить стиль линий, добавьте свойства к отдельным объектам-линиям в массиве series:

var myConfig = {
  type: 'line',
  series: [
    { 
      values: [20,40,25,50,15,45,33,34],
      'line-color': #6666ff,   // Hexadecimal or RGB 
      'line-style': 'dashed',  // solid | dashed
      'line-width': 5          // In pixels
    },
    { values: [5,30,21,18,59,50,28,33] },
    { values: [30,5,18,21,33,41,29,15] }
  ]
};

Примечание. Для имен свойств с дефисами ключ должен быть в кавычках.

В итоге

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

Чтобы вдохновиться уже созданными диаграммами, посетите галерею ZingChart или перейдите непосредственно к примерам линейных диаграмм. Не стесняйтесь нажимать кнопку редактировать на любой из демонстраций, которые будут разветвлены и сохранены в вашей учетной записи ZingChart Studio!

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