Область Диаграммы - Нескольких Осей / Графики / Сниппеты 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: 1132

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 2016-06-13 в 14:53

Метка: 1581145484

⇄ ⇅

<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: "Скорость реакции на расстояние"
 },
 exportOptions: {
 image: false,
 print: false
 },
 axisY: [
 {
 title: {
 text: "Обдуманное расстояние (m)",
 style: {
 color: "#52B0F0"
 }
 },
 swapLocation: false,
 axisTickText: {
 style: {
 color: "#52B0F0"
 }
 }
 }, {
 title: {
 text: "Тормозной путь (m)",
 style: {
 color: "#D7C43A"
 }
 },
 swapLocation: true,
 axisTickText: {
 style: {
 color: "#D7C43A"
 }
 }
 }],
 dataSeries: [{
 axisY: 0,
 seriesType: "area",
 collectionAlias: "Обдуманное расстояние",
 data: [6, 9, 12, 15, 18, 21, 24]
 },
 {
 axisY: 1,
 seriesType: "area",
 collectionAlias: "Тормозной путь",
 data: [6, 14, 24, 38, 54, 75, 96]
 }
 ]
 });
 });
 </script>

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