Jquery построение графиков по формуле. Круговая диаграмма с jQuery

Здравствуйте, уважаемые читатели a! Диаграммы являются одним из лучших способов отображения данных и гораздо более информативными, чем таблицы. В этой статье рассмотрим пример построения диаграмм с помощью отличного javascript плагина — Chart.js . Для построения диаграмм, гистограмм, линейных графиков, круговых диаграммы и много другого плагин использует . В качестве примера использования chart.js рассмотрим набор из 3 элементов, один будет показывать количество покупателей вымышленного продукта в течение 6 месяцев — это будет график, второй покажет, из каких стран клиенты — это будет круговая диаграмма и наконец мы будем использовать гистограмму, чтобы показать прибыль за этот период.

Подключение

Первое, что нужно сделать, это загрузить Chart.js . Остается только подключить его к странице. Допустим файлы html и js находятся в одном каталоге, тогда в общем виде разметка страницы выглядит так:

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

Использование

Рисуем график

Чтобы нарисовать линейную диаграмму, нам нужно создать графический элемент HTML, в котором можно будет с помощью Chart.js сделать график:

Задаем размеры элемента и указываем идентификатор.

С помощью класса Chart определяем линейную диаграмму.

Теперь задаем параметры и данные для отображения:

Для более «точечной» настройки также можно использовать опции.

• Перевод

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

В этой статье я покажу вам некоторые из лучших JavaScript библиотек для построения диаграмм/схем (и сводных таблиц). Эти библиотеки помогут вам в создании красивых и настраиваемых графиков для ваших будущих проектов.

Хотя большинство библиотек являются бесплатными и свободно распространяемыми, для некоторых из них есть платные версии с дополнительным функционалом.

D3.js – документы, ориентированные на данные

В отличие от многих других JavaScript библиотек, D3.js не поставляется с заранее созданными графиками прямо из коробки. Однако вы можете взглянуть на перечень графиков, созданных на D3.js , чтобы получить общее представление.

D3.js не работает должным образом со старыми браузерами, такими как IE8. Но вы всегда можете применить такие плагины как aight plugin для кроссбраузерной совместимости.

D3.js ранее широко использовался на таких вебсайтах как NYTimes , Uber и Weather.com

Google Charts

В Google charts также имеется множество конфигурационных настроек, которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.

Highcharts JS

Одно из самых больших преимуществ применения HighchartsJS – совместимость со старыми браузерами, такими как Internet Explorer 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.

Хотя HighchartsJS и бесплатен для персонального использования, вам необходимо приобрести лицензию для коммерческого применения.

Fusioncharts

В отличие от множества библиотек, Fusioncharts предоставляет возможность парсинга как JSON данных, так и XML. Вы также можете экспортировать эти графики в 3 разных формата: PNG, JPG и PDF.

Fusioncharts хорошо совместим со старыми браузерами, такими как IE6. И по этой причине он стал одной из наиболее предпочитаемых библиотек во множестве торговых организаций.

Вы можете бесплатно использовать версию Fusioncharts с водяным знаком как в личных так и в коммерческих проектах. Однако, вам необходимо приобрести лицензию , чтобы избавиться от водяного знака.

Flot

Flot поддерживает линейчатые, точечные, гистограммы, столбчатые и любые комбинации из этих видов диаграмм. Также совместим со старыми браузерами, такими как IE 6 и Firefox 2.

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

amCharts

AmMaps – мой любимый из этих трёх, что указаны выше. Предоставляет такие возможности, как теплокарты, рисование линий, добавление текста на карту, загрузка иконок или фотографий в верхнюю часть вашей карты, изменение масштаба и пр.
amCharts использует SVG для рендеринга графиков который работает только в современных браузерах. Графики могут не правильно отображаться в IE ниже 9й версии.

EJS Chart предоставляется в бесплатной и платной версиях. Бесплатная версия имеет ограничение, не позволяющее вам использовать более 1 графика на странице и более двух (числовых) последовательностей на графике. Ознакомьтесь с ценовыми подробностями .

uvCharts

UvCharts построен на D3.js библиотеке. Этот проект обещает устранить все сложные нюансы кодинга D3.js и обеспечить лёгкую реализацию графиков стандартного вида. uvCharts генерируется посредством SVG, HTML и CSS.

Заключение

Надеюсь вам понравилась эта статья. Хорошего дня.

Перед принятием важных решений каждый бизнесмен сперва анализирует данные. В любой области рынка можно найти огромный объем данных, из которых можно извлечь ценную информацию. С приходом Big Data старые добрые таблицы Excel утратили актуальность, и потребовалось найти столь же простую альтернативу.

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

Графические библиотеки на JavaScript быстро заняли нишу мощных и доступных инструментов визуализации данных.С их помощь можно извлечь всю полезную информацию из любых объемов данных, взглянуть на неё под удобным углом и разглядеть шаблоны, невидимые на графиках уровня Excel.

1. Chartist.js

Chartist отличается простотой и легкостью освоения, столь необходимыми всем, кто привык к таблицам Excel. Графики адаптивны и не зависят от DPI экрана, что делает библиотеку отличным решением для сайтов, рассчитанных на широкий спектр устройств - от мобильных до десктопов. Рисование выполняется на базе технологии SVG, что гарантирует совместимость со всеми современными браузерами.

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

2. FusionCharts

Одна из самых объемных библиотек, FusionCharts насчитывает более 90 вариантов графиков и 900 видов карт, доступных “из коробки”. Авторы хвастаются, что их продукт является лучшим в своей сфере с точки зрения визуализации данных. Свои слова они подкрепляют развернутыми примерами использования библиотеки на реальных бизнес-процессах.

FusionCharts поддерживает широкий спектр устройств и технологий, включая Mac, iPhone, Android, и даже умеет рисовать в раритетах вроде IE6!

Подумали разработчики и о форматах - поддерживаются JSON и XML, отрисовка через HTML5/SVG и VML. Готовые графики можно экспортировать в виде рисунков формата PNG или JPG, либо в виде PDF. Расширения FusionCharts позволяют встраивать библиотеку в любые стеки технологий, включая jQuery, AngularJS, чистый PHP или Rails.

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

Лицензия: бесплатная для некоммерческих проектов, платная в ином случае.

3. Dygraphs

Dygraphs - графическая open-source библиотека, идеально подходящая для экстремально больших массивов данных. “Из коробки” она полностью поддерживает интерактивность, возможность уточнения и увеличения графиков даже на мобильных устройствах.

Библиотека поддерживается всеми современными браузерами, а обратная совместимость распространяется вплоть до IE8. Поддерживается множество опций и callback-и.

Лицензия: open-source, бесплатна для любого использования.

4. Chart.js

Chart.js идеально подходит небольшим проектам, когда вам нужен плоский, чистый, элегантный график, и побыстрее. Библиотека занимает всего 11 Кб в сжатом виде, обеспечивая при этом 6 вариантов графиков - линейный, гистограмма, круговой, лепестковый, полярный и кольцевой. Каждый из них находится в модуле, что позволяет загружать именно тот блок, который вы хотите использовать в проекте.

Рендеринг производится при помощи HTML5 Canvas, а в браузерах, где его нет - через полифиллы. Все графики интерактивны.

Лицензия: open-source, бесплатна для любого использования.

5. Google Charts

Google Charts обеспечивает широкий набор графиков практически на любой вкус. Отрисовка осуществляется при помощи HTML5/SVG, либо VML на старых IE. Все графики интерактивны, а некоторые можно увеличивать и растягивать по необходимости. Взглянуть на существующие виды графиков можно здесь.

Лицензия: бесплатная, но не open-source. Лицензия запрещает размещать JS-файл для отрисовки на сервере сайта. Если вы занимаетесь сайтом для предприятия, и размещаете в графиках конфиденциальные данные, лучше поискать альтернативу Google Charts.

6. Highcharts

Highcharts - еще одна популярная интерактивная библиотека графиков, как и большинство других, основанная на HTML5/SVG/VML. Поддерживается широкий спектр различных видов графиков, а специальный одноименный интерфейс позволяет создавать интерактивные графики прямо на ходу.

Лицензия: бесплатная для некоммерческого использования, в ином случае - платная.

7. Flot

Flot - одна из старейших библиотек, главной особенностью которой является простота и интерактивность. Она работает на jQuery, и, для полноценной работы, вам потребуется опыт работы с ним. Как только вы освоите синтаксис, в ваших руках будет полный контроль над презентацией, её анимацией и интерактивной частью.

Flot поддерживает большинство современных браузеров и умеет рисовать даже в IE6. В репозитории плагинов к Flot можно найти множество наработок сторонних авторов, расширяющих функционал библиотеки. Увидеть примеры использования Flot можно .

Лицензия: open-source, бесплатна для любого использования.

8. D3.js

Для некоторых D3 - первое, что приходит в голову, когда речь заходит о визуализации данных. Это действительно мощный open source проект, позволяющий создавать невероятные визуальные эффекты при помощи изменения DOM. Графики рисуются при помощи HTML5, SVG и CSS.

Библиотека соответствует стандартам W3C и поддерживается всеми актуальными браузерами. Разработчики любят её за широкий спектр возможностей и мощный API. Демонстрация возможностей D3 доступна .

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

Лицензия: open-source, бесплатна для любого использования.

9. n3-charts

Если вам нужна технология, способная рисовать простые интерактивные линейные графики на базе вашего AngularJS-приложения, то это ваш выбор. N3 основан на D3 и ставит своей целью лишь один сегмент разработчиков - тех, кто использует AngularJS. Ищущим разнообразия лучше взглянуть на другие варианты. Примеры использования N3 доступны .

Лицензия: open-source, бесплатна для любого использования.

10. NVD3

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

Лицензия: open-source, бесплатна для любого использования.

11. Ember Charts

Ember Charts разрабатывалась компанией Addepar для расширения спектра функций Ember . Помимо Charts, в эту команду также входят Ember Tables и Ember Widgets. Библиотека построена на основе D3 с интеграцией во фреймворк Ember.js.

Крепкая, вылизанная до мелочей библиотека отлично подходит для работы с данными любой сложности. Встроенная поддержка обработки ошибок позволяет презентации не “упасть”, встретив некорректные данные. Можно расширять функционал сборки самостоятельно.

Лицензия: open-source, бесплатна для любого использования.

12. jQuery Sparklines

До этого мы, в основном, говорили о тяжеловесах - универсалах, способных сделать буквально всё. Но иногда вам нужно что-то простое для выполнения базовых графиков. jQuery Sparklines - именно то решение, которое заполняет эту нишу. С её помощью можно генерировать спарклайны - маленькие линейные графики, дающие представление об общих трендах и занимающие минимум места на странице. Библиотека поддерживается большинством браузеров, включая IE6.

Лицензия: open-source, бесплатна для любого использования.

13. Sigma.js

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

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

Лицензия: open-source, бесплатна для любого использования.

14. Morris.js

Как говорил Моррис, хороший график не должен быть сложным. Morris - миниатюрная библиотека на основе jQuery и Raphael, обеспечивающая простые и чистые графики. Список поддерживаемых визуализаций невелик, но Morris следует попробовать, если вам нужно что-то быстрое, простое и привычное.

Лицензия: open-source, бесплатна для любого использования.

15. Cytoscape.js

Cytoscape - красивая open source библиотека на чистом Javascript под лицензией LGPL3+. Максимальная оптимизация и никаких внешних зависимостей. Cytoscape позволяет создавать графики, которые можно использовать затем отдельно, встраивая код в другие страницы.

Библиотека работает на всех современных браузерах и поддерживает популярные фреймворки, включая Node.js, jQuery, Meteor и множество других. Заметьте, что существует приложение Cytoscape , которое, несмотря на название, никак не связано с библиотекой.

Лицензия: open-source, бесплатна для любого использования.

16. C3.js

C3.js - еще один форк D3. Количество веток от D3 показывает, насколько хороши возможности библиотеки, и как тяжело совладать с ней программистам.

C3.js обходит ужасную кривую обучения D3 через собственные обработчики кода для представления графика. C3 позволяет создавать собственные классы, на базе которых можно генерировать уникальные графики. В нём уже имеется API и callback-и, необходимые для работы с графиком после отрисовки.

С точки зрения взаимодействия, Флот, безусловно, приблизит вас к графике Flash, как можно ближе к jQuery . Несмотря на то, что вывод графика довольно гладкий и великолепно выглядящий, вы также можете взаимодействовать с точками данных. Я имею в виду, что вы можете иметь возможность навести курсор на точку данных и получить визуальную обратную связь от значения этой точки на графике.

Версия trunk для флота поддерживает круговые диаграммы.

Возможность масштабирования флота.

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

Sparklines

Ограничения: Pie, Line, Bar, Combination

Sparklines - мой любимый мини-графический инструмент. Действительно отлично подходит для графиков стиля панели инструментов (подумайте о панели инструментов Google Analytics при следующем входе в систему). Поскольку theyre настолько крошечный, они могут быть включены в строку (как в примере выше). Еще одна приятная идея, которая может использоваться во всех графических плагинах, - это возможности самообновления. Их демо-версия Mouse-Speed ​​показывает вам мощь живого графика в лучшем виде.

Диаграмма запросов 0.21

Ограничения: Area, Line, Bar и комбинации этих

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

Добавление значений в диаграмму относительно просто:

ChartAdd({ "label" : "Leads", "type" : "Line", "color" : "#008800", "values" : ["100","124","222","44","123","23","99"] });

jQchart

Ограничения: Бар, Линия

jQchart является нечетным, они встроены в анимационные транзисторы и функции перетаскивания в диаграмму, однако его немного неуклюжие - и, казалось бы, бессмысленные. Он генерирует красивые диаграммы, если вы правильно настроите CSS , но там лучше.

TufteGraph

Ограничения: Bar и Stacked Bar

Tuftegraph продает себя как "красивые гистограммы, которые вы покажете своей матери". Он приближается, Флот красивее, но Tufte делает себя очень легким. Хотя с этим и заканчиваются ограничения - есть несколько вариантов выбора, так что вы получаете то, что вы указали. Посмотрите на карту быстрого выигрыша.

Вы узнали как устанавливать и использовать Chart.js. Также вы изучили некоторые глобальные параметры, с помощью которых можно изменять шрифт и всплывающие подсказки для различных графиков. Из этого руководства, вы знаете как создавать линейные и столбчатые диаграммы с использованием Chart.js.

Создание линейных диаграмм

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

Chart.js позволяет создавать линейные диаграммы, если задать type как line . Вот пример:

Var lineChart = new Chart(speedCanvas, { type: "line", data: speedData, options: chartOptions });

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

Var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [{ label: "Car Speed", data: , }] }; var chartOptions = { legend: { display: true, position: "top", labels: { boxWidth: 80, fontColor: "black" } } };

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

Цвет области под кривой определяется ключом backgroundColor . Все линейные диаграммы, построенные с использованием этого метода, будут заполнены данным цветом. Вы можете установить значение ключа fill (заливка) равным false , если вы хотите просто нарисовать линию, без заполнения области по дней каким-либо цветом.

Еще одна вещь, которую вы могли заметить, это то, что для построения диаграммы мы используем отдельные указатели данных (точки). Библиотека автоматически интерполирует значения всех остальных точек с помощью встроенных алгоритмов.

По умолчанию точки строятся с использованием пользовательской взвешенной кубической интерполяции. Однако, вы можете установить значение ключа cubicInterpolationMode в monotone для более точного построения точек, если график, который вы создаете, определяется уравнением y = f (x) . Упругость кривой Безье определяется ключом lineTension . Вы можете установить его значение равным нулю, чтобы нарисовались прямые линии. Обратите внимание, что этот ключ игнорируется, если уже указано значение cubicInterpolationMode .

Вы также можете задать значения цвета границы и её ширины с помощью ключей borderColor и borderWidth . Если вы хотите построить диаграмму, используя пунктирную линию вместо сплошной линии, вы можете использовать ключ borderDash . Он принимает массив в качестве значений, элементы которого определяют длину и промежуток штрихов соответственно.

Появление построенных точек можно контролировать с помощью свойств pointBorderColor , pointBackgroundColor , pointBorderWidth , pointRadius и pointHoverRadius . Существует также ключ pointHitRadius , который определяет расстояние, с которого, точки на графике, начнут взаимодействовать с мышью.

Var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: [{ label: "Car Speed", data: , lineTension: 0, fill: false, borderColor: "orange", backgroundColor: "transparent", borderDash: , pointBorderColor: "orange", pointBackgroundColor: "rgba(255,150,0,0.5)", pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: "rectRounded" }] };

Указанный выше объект speedData отображает те же точки данных, что и предыдущий график, но с другими значениями, установленными для всех свойств.

Также вы можете построить несколько линий на одном графике и задать различные параметры, чтобы нарисовать каждый из них следующим образом:

Var dataFirst = { label: "Car A - Speed (mph)", data: , lineTension: 0.3, // Set More Options }; var dataSecond = { label: "Car B - Speed (mph)", data: , // Set More Options }; var speedData = { labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], datasets: }; var lineChart = new Chart(speedCanvas, { type: "line", data: speedData });

Создание столбчатых диаграмм

Столбчатые диаграммы (или гистограммы) полезны, когда вы хотите сравнить одно измерение для разных объектов - например, количество автомобилей, продаваемых разными компаниями, или количество людей определенной возрастной группы в городе. Вы можете создать столбчатые диаграммы в Chart.js, установив ключ type в bar . По умолчанию это создаст диаграммы с вертикальными столбцами. Если вы хотите создать диаграммы с горизонтальными столбцами, вы должны установить type как horizontalBar .

Var barChart = new Chart(densityCanvas, { type: "bar", data: densityData, options: chartOptions });

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

Var densityData = { label: "Density of Planets (kg/m3)", data: }; var barChart = new Chart(densityCanvas, { type: "bar", data: { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: } });

Параметры, приведенные выше, создадут следующую диаграмму:

Так же как в линейных диаграммах, полосы заполнены светло-серым цветом. Вы можете изменить цвет полос, используя ключ backgroundColor . Аналогично, цвет и ширина границ разных полос могут быть заданы с помощью ключей borderColor и borderWidth .

Если вы хотите, чтобы библиотека не рисовала границы для определенной стороны, вы можете указать сторону в качестве значения для ключа borderSkipped . Вы можете установить следующие значение: top , left , bottom или right . Также вы можете изменить границы и цвет фона различных полос, которые вы увидите при наведении на них курсора мыши, с помощью hoverBorderColor и hoverBackgroundColor .

Размер столбцов в столбчатой диаграммы выше был вычислен автоматически. Однако вы можете контролировать ширину отдельных столбцов, используя свойства barThickness и barPercentage . Ключ barThickness используется для настройки толщины столбцов в пикселях, а barPercentage используется для настройки толщины в процентах от доступной ширины группы.

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

Var densityData = { label: "Density of Planets (kg/m3)", data: , backgroundColor: [ "rgba(0, 99, 132, 0.6)", "rgba(30, 99, 132, 0.6)", "rgba(60, 99, 132, 0.6)", "rgba(90, 99, 132, 0.6)", "rgba(120, 99, 132, 0.6)", "rgba(150, 99, 132, 0.6)", "rgba(180, 99, 132, 0.6)", "rgba(210, 99, 132, 0.6)", "rgba(240, 99, 132, 0.6)" ], borderColor: [ "rgba(0, 99, 132, 1)", "rgba(30, 99, 132, 1)", "rgba(60, 99, 132, 1)", "rgba(90, 99, 132, 1)", "rgba(120, 99, 132, 1)", "rgba(150, 99, 132, 1)", "rgba(180, 99, 132, 1)", "rgba(210, 99, 132, 1)", "rgba(240, 99, 132, 1)" ], borderWidth: 2, hoverBorderWidth: 0 }; var chartOptions = { scales: { yAxes: [{ barPercentage: 0.5 }] }, elements: { rectangle: { borderSkipped: "left", } } }; var barChart = new Chart(densityCanvas, { type: "horizontalBar", data: { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: , }, options: chartOptions });

Объект densityData используется для установки границ и фонового цвета столбцов. В приведенном выше коде стоит обратить внимание на две вещи. Во-первых, значения свойств barPercentage и borderSkipped были установлены внутри объекта chartOptions вместо объекта dataDensity .

Во-вторых, на этот раз type диаграммы установлен в значение horizontalBar . Что также означает, что вам придется изменить значение barThickness и barPercentage для оси Y вместо оси X, чтобы эти значения имели хоть какой-либо эффект на столбцах.

Приведенные выше параметры создадут следующую гистограмму.

Вы также можете сделать графики из несколько наборов данных на одной и той же диаграмме, присвоив id (идентификатор) определенной оси конкретному набору данных. Ключ xAxisID используется для присвоения id любой оси X вашего набора данных. Аналогично, ключ yAxisID используется для присвоения идентификатора любой оси вашего набора данных. Обе оси также имеют ключ id , который вы можете использовать для назначения им уникальных идентификаторов.

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

Var densityData = { label: "Density of Planet (kg/m3)", data: , backgroundColor: "rgba(0, 99, 132, 0.6)", borderColor: "rgba(0, 99, 132, 1)", yAxisID: "y-axis-density" }; var gravityData = { label: "Gravity of Planet (m/s2)", data: , backgroundColor: "rgba(99, 132, 0, 0.6)", borderColor: "rgba(99, 132, 0, 1)", yAxisID: "y-axis-gravity" }; var planetData = { labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"], datasets: }; var chartOptions = { scales: { xAxes: [{ barPercentage: 1, categoryPercentage: 0.6 }], yAxes: [{ id: "y-axis-density" }, { id: "y-axis-gravity" }] } }; var barChart = new Chart(densityCanvas, { type: "bar", data: planetData, options: chartOptions });

Здесь мы создали две оси Y с уникальными идентификаторами и они были назначены на отдельные наборы данных, используя ключ yAxisID . Ключи barPercentage и categoryPercentage используются, чтобы сгруппировать столбцы для отдельных планет. Настраиваем categoryPercentage на более низкое значение, чтобы увеличить расстояние между столбцами разных планет. Аналогичным образом, установив barPercentage на более высокое значение, мы уменьшим расстояние между столбцами одной и той же планеты.

На последок

В этом уроке мы рассмотрели все аспекты линейных и столбчатых диаграмм в Chart.js. Теперь вы должны уметь создавать базовые диаграммы, изменять их внешний вид и отображать несколько наборов данных на одном графике без каких-либо проблем. В следующей части серии вы узнаете о радиальных и полярных диаграммах в Chart.js.

Надеюсь, вам понравился этот урок. Если у вас есть какие-либо вопросы, пожалуйста, сообщите о них в комментариях.