Автор: Джош из ZingSoft
Гистограммы, также известные как столбчатые диаграммы, бывают разных форм и размеров.
В этом посте я расскажу, как создать простую вертикальную гистограмму, используя бесплатную библиотеку Javascript ZingChart.
Даже не зная HTML, CSS и Javascript, вы можете легко воплотить свои данные в жизнь всего за несколько коротких шагов.
Я расскажу о следующих шагах:
- Ссылка на библиотеку ZingChart
- Размещение диаграммы на вашей HTML-странице
- Добавление данных и рендеринг вашей диаграммы
- Базовая настройка вашей диаграммы
1. Ссылка на библиотеку ZingChart
Если вы мало знакомы с макетами HTML, я предоставил один ниже с уже упомянутой библиотекой ZingChart.
<!DOCTYPE html> <html> <head> <meta charset=”utf-8"> <title>ZingChart: My Bar Chart</title> <script src=”https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> </body> </html>
При ссылке на библиотеку ZingChart обязательно включите фрагмент кода, включенный в макет HTML, показанный выше.
Вы также можете скачать библиотеку ZingChart или воспользоваться менеджером пакетов, например NPM.
2. Размещение диаграммы на HTML-странице.
Прежде чем вы начнете вводить какие-либо данные, вам нужно будет сослаться на свою диаграмму в <body> вашего кода, чтобы диаграмма действительно могла отображаться на странице.
<!DOCTYPE html> <html> <head> <meta charset=”utf-8"> <title>ZingChart: My Bar Chart</title> <script src=”https://cdn.zingchart.com/zingchart.min.js"></script> </head> <body> <div id=”myChart”> </div> </body> </html>
Для этого вам нужно создать открывающую и закрывающую <div>. В этом теге <div> вы также захотите включить имя вашей диаграммы в виде id. Что касается HTML, все готово! См. Пример выше.
3. Добавление данных и отображение диаграммы.
Здесь в игру вступают некоторые знания о Javascript, однако его все еще просто реализовать.
Следующим шагом будет добавление тегов <script>. Здесь вы собираетесь разместить свой Javascript. При добавлении тега <script> не забудьте включить его после <div>, чтобы отобразить диаграмму.
<script>
var chartData = {
type: 'bar',
series: [
{ values: [35, 43, 70, 65] },
{ values: [25, 57, 49, 60] }
]
};
zingchart.render({
id: 'myChart',
data: chartData,
height: 400,
width: 600
});
</script>
Если вы включите код в тег <script> выше и запустите этот файл в своем браузере, вы создадите полнофункциональную гистограмму!
А теперь давайте разберемся, что именно происходит выше.
var chartData = { //Sets a variable with all of the chart data
type: 'bar', //Tells ZingChart the type of chart
series: [ //Creates different series of data
{ values: [35, 43, 70, 65] }, //Values for the first bar
{ values: [25, 57, 49, 60] } //Values for the second bar
]
};
Я установил переменную или var с именем chartData. Здесь будут ссылаться все ваши данные, атрибуты и объекты (не волнуйтесь, я рассмотрю другие атрибуты позже).
После того, как вы создали переменную chartData, вы захотите установить, с каким типом диаграммы вы будете работать.
Эта переменная будет создана как объект Javascript, а все атрибуты и данные будут перечислены как значения внутри объекта. Для получения дополнительной информации об объектах Javascript ознакомьтесь с этой статьей.
var chartData = {
type: 'bar', //Tells ZingChart the type of chart
series: [
{ values: [35, 43, 70, 65] },
{ values: [25, 57, 49, 60] }
]
};
В этом случае вы хотите создать bar диаграмму. Это можно сделать, включив type: ‘bar’ в качестве атрибута в объект. Я перечислю многие другие варианты ZingChart, доступные позже в этом посте.
var chartData = {
type: 'bar',
series: [ //Creates different series of data
{ values: [35, 43, 70, 65] }, //Values for the first bar
{ values: [25, 57, 49, 60] } //Values for the second bar
]
};
Двигаясь вперед, вы также захотите включить данные в свой объект. Это можно сделать с помощью атрибута series. Вы заметите, что этот атрибут указан как массив с большим количеством перечисленных внутри объектов. Не стесняйтесь экспериментировать с другим количеством объектов в серии, чтобы увидеть, как это влияет на то, что отображается на странице.
Наконец, вы захотите отобразить свою диаграмму на странице.
zingchart.render({ //Render method used to show chart on page
id: 'myChart', //Reference the id used in the <div> tag
data: chartData, //Reference the chartData object created above
height: 400, //Sets height for chart
width: 600 //Sets width for chart
});
Это можно сделать, вызвав метод zingchart.render, показанный выше. Этот метод принимает определенные атрибуты в качестве аргументов для функции рендеринга.
id: “myChart” используется для ссылки на ваш div в HTML.
data: chartData используется для обозначения того, какие данные вы хотите использовать при рендеринге диаграммы. Это значение должно быть установлено в объектную переменную, созданную ранее.
Аргументы height и width используются для установки размера самой диаграммы.
После того, как все это будет заполнено, вы можете запустить полностью работоспособную диаграмму в DOM.
Прежде, чем я продолжу ..
Самый простой способ поиграть с различными типами доступных диаграмм - это зарегистрироваться в бесплатном веб-приложении ZingChart ZingSoft Studio.
Это даст вам полный доступ к библиотеке ZingChart в среде, похожей на песочницу. Studio позволяет создавать полностью функционирующие диаграммы и сетки, не начиная с нуля.
Загляните в Студию и начните рисовать!
4. Базовая настройка вашей диаграммы
Теперь, когда я рассмотрел основы, я немного глубже рассмотрю, насколько мощным на самом деле является ZingChart. Я смогу охватить лишь небольшую часть доступных настроек, но я рекомендую вам ознакомиться с документацией ZingChart, чтобы ответить на любые вопросы, которые могут у вас возникнуть.
Ранее я обсуждал множество различных типов доступных гистограмм. Чтобы переключить стандартную гистограмму, которую я создал ранее, на один из этих разных типов, вам нужно настроить атрибут type. Взгляните на несколько примеров ниже, чтобы увидеть, что происходит, когда вы устанавливаете атрибут type для нескольких других типов гистограмм.
Есть и другие способы изменить форму полос на диаграмме. Вы можете изменить форму диаграммы, добавив атрибут aspect к объекту plot. Установка значения cone, histogram, cylinder или pyramid соответственно изменит форму полосы.
У вас также есть возможность включать в свои диаграммы все виды стилей. Изменить цвета полос так же просто, как установить для атрибута background-color вашего набора данных цвет по вашему выбору. Вы также можете установить изменение непрозрачности полосы с помощью атрибута alpha и выбора уровня непрозрачности от 0 до 1.
Настроить стили для осей «x» и «y» так же просто, как настроить объект scale-x или scale-y, чтобы включить масштаб, который вы ищете.
Установив для атрибута min-value число во времени Unix и установив для атрибута step значение day, вы можете настроить диаграмму так, чтобы она следовала временному ряду.
Примечание. Чтобы настроить формат каждого значения оси x, вам нужно будет использовать объект transform и установить type на date, а также изменить атрибут all на %M %d. Это позволит оси абсцисс отображать месяцы и дни каждого столбца.
При создании гистограммы доступно множество других функций, и я настоятельно рекомендую вам ознакомиться с документами, а также создать одну или две диаграммы в Studio.
Пионер в мире визуализации данных, ZingChart - это мощная библиотека Javascript, созданная с учетом больших данных. Благодаря более чем 35 типам диаграмм и простой интеграции с вашим стеком разработки, ZingChart позволяет с легкостью создавать интерактивные и адаптивные диаграммы.
