Простые кроссбраузерные гистограммы с Google Charts

Чуть ниже вниманию читателей будет представлен пример создания простой гистограммы (столбиковой диаграммы) с использованием возможностей, которые бесплатно предоставляет всем желающим Google Charts.

Итак, задаем два типа стобцов, Доходы - зеленого цвета, Расходы - черного цвета. Озаглавим все, как Производительность компании.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages: ["corechart"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Год', 'Доходы', 'Расходы'], // - на основе этих данных формируем графики.
                    ['2011', 1000, 600],
                    ['2012', 1115, 400],
                    ['2013', 1570, 460]
                ]);

                var options = {
                    title: 'Производительность компании', // - заголовок диаграммы.
                    series: {0: {color: 'green'}, 1: {color: 'black'}}, // - цвета столбцов.
                    hAxis: {title: 'Год', titleTextStyle: {color: 'green'}} // - цвет и надпись, нижняя. 
                };

                var chart = new google.visualization.ColumnChart(document.getElementById('company_performance'));
                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <div id="company_performance" style="width: 900px; height: 500px;"></div>
        <!-- Вместо этого дива будет красивая гистограмма, см. выше. -->
    </body>
</html>

Выглядеть в итоге все будет вот так:

Google Charts - гистограммы

Google Charts - это кроссбраузерное решение, по крайней мере работает и на Internet Explorer 8! Ну и разумеется во всех остальных актуальных (и не очень) ныне интернет-обозревателях.





© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.