В данном уроке мы представим решение для создания интерактивных диаграмм для работы с данными. Библиотека Highcharts позволяет построить интуитивно понятные диаграммы без существенных усилий. Библиотека поддерживает различные типы отображения диаграмм: области, линии, сплайны, интегралы, сектора, столбцы и другие.
Разметка HTML
Сначала добавляем все необходимые скрипты в раздел заголовка:
<!-- Скрипты -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/gray.js"></script>
<script src="js/main.js"></script>
Здесь подключается библиотеки jQuery и Highcharts. В файле gray.js содержится тема для оформления диаграмм. В архиве с исходниками также можно найти несколько других тем: dark-blue.js, dark-green.js, grid.js и skies.js. Любой из них можно использовать для оформления диаграммы в разных стилях. Последний файл – main.js – содержит код инициализации диаграммы. В демонстрации представлены два типа диаграмм, также можно изменять тип линейной диаграммы "на лету".
<!-- Переключатель типа диаграммы -->
<div class="actions">
<button class="switcher" id="column">Столбцы</button>
<button class="switcher" id="area">Области</button>
<button class="switcher" id="line">Линия</button>
<button class="switcher" id="spline">Сплайны</button>
<button class="switcher" id="areaspline">Интегралы</button>
</div>
<!-- Две разных диаграммы -->
<div id="chart_1" class="chart"></div>
<div id="chart_2" class="chart"></div>
CSS
Для диаграммы мы только настраиваем ширину, а также определяем внешний вид кнопок переключения стилей диаграммы:
.actions, .chart {
margin: 15px auto;
width: 820px;
}
button {
background: none repeat scroll 0 0 #E3E3E3;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px 1px #F6F6F6 inset;
color: #333333;
font: bold 12px;
margin: 0 5px;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: 150px;
}
button:hover {
background: none repeat scroll 0 0 #D9D9D9;
box-shadow: 0 0 1px 1px #EAEAEA inset;
color: #222222;
cursor: pointer;
}
button:active {
background: none repeat scroll 0 0 #D0D0D0;
box-shadow: 0 0 1px 1px #E3E3E3 inset;
color: #000000;
}
JavaScript
Подготавливаем функцию ChangeChartType для смены типа диаграммы "на лету". При нажатии на кнопку генерируется событие onClick, которое вызывает функцию ChangeChartType и в нее передается значение атрибута ID (соответствующее нужному типу диаграммы).
Обратите внимание, как происходит инициализация объекта Highcharts.Chart. нужно определить объект, где будет выводиться диаграмма, тип, оси X и Y и данные (массив). Полностью описание API приводится
на официальном сайте библиотеки Highcharts.
// Функция смены типа диаграммы
function ChangeChartType(chart, series, newType) {
newType = newType.toLowerCase();
for (var i = 0; i < series.length; i++) {
var srs = series[0];
try {
srs.chart.addSeries({
type: newType,
stack: srs.stack,
yaxis: srs.yaxis,
name: srs.name,
color: srs.color,
data: srs.options.data
},
false);
series[0].remove();
} catch (e) {
}
}
}
// Определение двух диаграмм
var chart1, chart2;
// Запуск после зваершения загрузки DOM (документа)
$(document).ready(function() {
// Инициализация диаграммы
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'column',
height: 350,
},
title: {
text: 'Планы разработчиков по созданию HTML5 игр с помощью разных инструментов(в %)'
},
xAxis: {
categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
},
yAxis: {
title: {
text: 'Опрошено'
}
},
series: [{
name: 'Dev #1',
data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
}, {
name: 'Dev #2',
data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
}, {
name: 'Dev #3',
data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
}]
});
// Инициализация второй диаграммы (секторного типа)
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'chart_2',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
height: 350,
},
title: {
text: 'Секторная диаграмма'
},
tooltip: {
pointFormat: '<b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Dev #1',
data: [
['Processing.js', 5],
['Impact.js', 10],
['Other', 20],
['Ease.js', 22],
['Box2D.js', 25],
['WebGL', 28],
['DOM', 30],
['CSS', 40],
['Canvas', 80],
['Javascript', 90]
]
}]
});
// Переключение типа диаграммы
$('.switcher').click(function () {
var newType = $(this).attr('id');
ChangeChartType(chart1, chart1.series, newType);
});
});