Highcharts, пример диаграммы с информацией

Диаграммы с Highcharts

Если вы ищете, как создать активную карту charts (диаграммы) с информацией — эта статья для вас. Есть хорошее решение с библиотекой Highcharts. Это чистая библиотека JavaScript, которая предлагает интерактивные диаграммы и интуитивно понятны. Эта библиотека поддерживает различные возможные диаграммамы, гистограмм. Это один из способов отображения информации.
Демо

Шаг 1. HTML

В начале мы должны добавить все необходимые скрипты в заголовок раздела:



<!-- Подключаем скрипты -->
<script src=
http://pixelcom.crimea.ua/"http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src=
http://pixelcom.crimea.ua/"js/highcharts.js"></script>
<script src=
http://pixelcom.crimea.ua/"js/gray.js"></script>
<script src=
http://pixelcom.crimea.ua/"js/main.js"></script>



Библиотеки highcharts, gray.js, main.js для дизайна диаграмм. Конструкция диаграмм меняется в файле gray.js. Файл main.js — файл инициализации кода. В демонстрации две различные диаграммы, плюс — возможность изменения типа диаграммы на лету для первой диаграммы, давайте посмотрим на HTML код:



<!-- Тип диаграммы коммутаторов -->
<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>



Шаг 2. CSS

css / main.css

Есть никаких специальных стилей для наших графиках, но в любом случае, демо содержит несколько настроек (определенная ширина для диаграмм и пользовательские кнопки):



.actions, .chart {
    margin: 15px auto;
    width: 820px;
}
button {
    background: #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: #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
}
button:active {
    background: #D0D0D0;
    box-shadow: 0 0 1px 1px #E3E3E3 inset;
    color: #000000;
}



Шаг 3. js

Проверяем нашу инициализацию, код JavaScript:

js / main.js



// Функций изменение типа диаграммы 
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) закончили загрузку
$(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: 'Interviewed'
        }
     },
     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]
            ]
         }]
    });

    // Коммутаторы (тип Chart1) - обработчик onclick 
    $('.switcher').click(function () {  
        var newType = $(this).attr('id');
        ChangeChartType(chart1, chart1.series, newType);
    });
});


В начале функция ChangeChartType , которая на лету будет изменять тип нашей первой таблицы. Когда мы нажимаем на кнопки они вызывают событие OnClick , мы называем функцию ChangeChartType и передаём значение атрибута ID в эту функцию (имя желаемой диаграммы). Обратите внимание, как специализируется объект Highcharts.Chart . Мы должны определить объект, где он должен сделать диаграмму, также мы можем определить XAxis, YAxis и серию (это массив исходных данных для нашей диаграммы). Официальный сайт этой библиотеки, здесь .

Статья подготовлена для вас коллективом сайта www.pixelcom.crimea.ua
Оригинал статьи: www.script-tutorials.com/active-charts-using-highcharts
Перевел: Виктор Клим
Правила использования материалов сайта!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


9 + = 18

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>