Область диаграммы - Экспорт / Графики / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0

Каталог: Сниппеты Bootstrap

Категория: Графики

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 524.0 Kb

Уникальный ID: 1151

Количество символов:

Посмотрели: 4098 раз

Помощь: установка & настройка

Прикреплён файл №1: /_sf/11/1151.css

Прикреплён файл №2: /stuff/0-0-0-1151-20

Скачали бесплатно: 113 раз

Прокомментировали: 0 раз

Рейтинг: 4.0 / 5 - 8 голосов

Тип лицензии: CC BY 4.0

Авторство: https://goo.gl/MDvCvt

Информация: Пользователям

Информация: Правообладателям

Теги: Chart, Snippet, диаграммы, html, графики, сниппет, Bootstrap

Поделился: BootstrapТема

Добавлено: 2016-06-26 в 21:26

Метка: 1581116478

⇄ ⇅

<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<link type="text/css" rel="StyleSheet" href="https://bootstraptema.ru/plugins/2016/shieldui/style.css" />
<script src="https://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2016/shieldui/script.js"></script>

<br><br><br>

<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">

<div id="chart">

<script>
 $(document).ready(function () {
 $("#chart").shieldChart({
 theme: "bootstrap",
 primaryHeader: {
 text: "Количество осадков относительно температуры"
 },
 seriesSettings: {
 area: {
 pointMark: {
 enabled: true
 }
 }
 },
 axisX: {
 categoricalValues: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]
 },
 dataSeries: [{
 seriesType: "area",
 collectionAlias: "Ср. температура",
 data: [48, 50, 55, 64, 73, 79, 82, 83, 80, 70, 61, 53]
 }, {
 seriesType: "area",
 collectionAlias: "Ср. осадки",
 data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.819, 3.894, 8.287, 9.552, 6.855, 2.865, 1.341]
 }],
 events: {
 legendSeriesClick: function (e) {
 // остановить событие щелчка элемента серии, так что
 // пользователь нажимает не переключить видимость серии
 e.preventDefault();
 }
 }
 });
 });
 </script>

</div>
</div>
</div>