Область Диаграммы - Соотношение Процентов / Графики / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0

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

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

Bootstrap: 3

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

Язык: Английский

Вес файла: 524.0 Kb

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

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

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

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

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

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

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

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

Рейтинг: 5.0 / 5 - 2 голосов

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

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

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

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

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

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

Добавлено: 2016-06-09 в 09:00

Метка: 1581146821

⇄ ⇅

<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
 },
 axisX: {
 categoricalValues: ["2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"]
 },
 seriesSettings: {
 area: {
 stackMode: "percent"
 }
 },
 dataSeries: [{
 seriesType: "area",
 collectionAlias: "Chrome",
 data: [0, 0, 0, 0, 3.6, 9.8, 22.4, 34.6]
 }, {
 seriesType: "area",
 collectionAlias: "Firefox",
 data: [0, 23.6, 29.9, 36.3, 44.4, 46.4, 43.5, 37.7]
 }, {
 seriesType: "area",
 collectionAlias: "Internet Explorer",
 data: [76.2, 68.9, 60.6, 56.0, 46.0, 37.2, 27.5, 20.2]
 }, {
 seriesType: "area",
 collectionAlias: "Mozilla",
 data: [16.5, 2.8, 2.5, 1.2, 0, 0, 0, 0]
 }, {
 seriesType: "area",
 collectionAlias: "Opera",
 data: [1.6, 1.5, 1.5, 1.6, 2.4, 2.3, 2.2, 2.5]
 }, {
 seriesType: "area",
 collectionAlias: "Safari",
 data: [0, 0, 0, 1.8, 2.7, 3.6, 3.8, 4.2]
 }]
 });
 });
 </script>

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