Создание диаграмм Highcharts.js хорошо выглядит на мобильных и настольных компьютерах

Мне интересно, если кто-то успешно реализовал отзывчивый дизайн с использованием Highcharts, чтобы сделать свои диаграммы хорошими как на мобильном, так и на рабочем столе.

По умолчанию Highcharts перемасштабируют, когда вы изменяете размер экрана браузера так, чтобы ось X была загромождена текстом галочки и гистограммы выглядели высокими и слишком тощими (слишком сжатыми). Чтобы понять, что я имею в виду, вы можете перейти на эту страницу и изменить размер браузера.

Я думаю, что эти проблемы можно было бы решить, уменьшив количество точек данных, скажем, до 1/3 исходного номера, хотя мне интересно, как это будет реализовано программно с использованием API Highcharts. Если это не похоже на хорошую идею, мне также интересны другие мысли или решения, которые люди могли бы использовать для использования Highcharts на мобильных (или, возможно, даже разных JS-графических библиотеках, где решение с несколькими устройствами могло бы быть проще реализовать?).

Ответ 1

Решение кажется довольно простым.

Просто не давайте графику фиксированную ширину, т.е. не определяйте ширину или набор width:100%, и, в отличие от демонстрации, которую я упоминаю, ширина гистограммы и сопутствующие полосы будут уменьшаться так же, как ширина браузера уменьшается.

Ответ 2

Вероятно, это зависит от того, какие типы диаграмм вы показываете. На мобильном телефоне, если вы показываете диаграмму столбца, вы можете повернуть диаграмму так, чтобы она стала гистограммой.

Если вы показываете линейную диаграмму, вы можете "просматривать" данные, так что вы показываете наименьшее количество очков, необходимых для получения точки. По мере того, как вы увеличиваете масштаб, переустановите данные, чтобы они соответствовали текущему виду. Это можно сделать, используя некоторые события в сочетании с некоторыми ручными js.

Ответ 3

Вы можете установить контейнер контейнера div width:100%. Затем просто удалите свойство высочайшей ширины. Я разрешил его для диаграммы искры. Теперь это мобильный отзыв.

Highcharts.chart('my-sparkline-chart, {
        chart: {
            type: 'areaspline',
            height: '70',
            //width: '189', //comment width property.
            spacing: [0, 0, 0, 0],
            backgroundColor: "transparent"
        }
...

Ответ 4

Пример с загрузкой

 <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Highcharts data from JSON Response</title>
        <style>
        body{
            margin-top: 30px;
            margin-left:40px;
        }
        .col-md-4{
        padding-left:5px !important;
        padding-right:5px !important;
        }
        </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script>    
<script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
       // Data gathered from http://populationpyramid.net/germany/2015/

// Age categories
var categories = ['0-4', '5-9', '10-14', '15-19',
        '20-24', '25-29', '30-34', '35-39', '40-44',
        '45-49', '50-54', '55-59', '60-64', '65-69',
        '70-74', '75-79', '80-84', '85-89', '90-94',
        '95-99', '100 + '];
$(document).ready(function () {
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },

        xAxis: [{
            categories: categories,
            reversed: false,
            labels: {
                step: 1
            }
        }, { // mirror axis on right side
            opposite: true,
            reversed: false,
            categories: categories,
            linkedTo: 0,
            labels: {
                step: 1
            }
        }],
        yAxis: {
            title: {
                text: null
            },
            labels: {
                formatter: function () {
                    return Math.abs(this.value) + '%';
                }
            }
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                    'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
            }
        },

        series: [{
            name: 'Male',
            data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
                -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
                -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
        }, {
            name: 'Female',
            data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
                3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
                1.8, 1.2, 0.6, 0.1, 0.0]
        }]
    });
     Highcharts.chart('container2', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Population pyramid for Germany, 2015'
        },
        subtitle: {
            text: 'Source: <a href="#" onclick="location.href='http://populationpyramid.net/germany/2015/'; return false;">Population Pyramids of the World from 1950 to 2100</a>'
        },
        xAxis: [{
            categories: categories,
            reversed: false,
            labels: {
                step: 1
            }
        }, { // mirror axis on right side
            opposite: true,
            reversed: false,
            categories: categories,
            linkedTo: 0,
            labels: {
                step: 1
            }
        }],
        yAxis: {
            title: {
                text: null
            },
            labels: {
                formatter: function () {
                    return Math.abs(this.value) + '%';
                }
            }
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                    'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
            }
        },

        series: [{
            name: 'Male',
            data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
                -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
                -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
        }, {
            name: 'Female',
            data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
                3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
                1.8, 1.2, 0.6, 0.1, 0.0]
        }]
    });
     Highcharts.chart('container3', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Population pyramid for Germany, 2015'
        },
        subtitle: {
            text: 'Source: <a href="#" onclick="location.href='http://populationpyramid.net/germany/2015/'; return false;">Population Pyramids of the World from 1950 to 2100</a>'
        },
        xAxis: [{
            categories: categories,
            reversed: false,
            labels: {
                step: 1
            }
        }, { // mirror axis on right side
            opposite: true,
            reversed: false,
            categories: categories,
            linkedTo: 0,
            labels: {
                step: 1
            }
        }],
        yAxis: {
            title: {
                text: null
            },
            labels: {
                formatter: function () {
                    return Math.abs(this.value) + '%';
                }
            }
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                    'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
            }
        },

        series: [{
            name: 'Male',
            data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
                -3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
                -2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
        }, {
            name: 'Female',
            data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
                3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
                1.8, 1.2, 0.6, 0.1, 0.0]
        }]
    });
})

    </script>
</head>
<body>
<div class="col-md-12 row">
<div class="col-md-4">
hello
</div>
  <div class="col-md-8 row">
  <div class="col-md-4"><div id="container" style="height: 400px;border:1px solid;"></div></div> <div class="col-md-4"><div id="container2" style="height: 400px;border:1px solid;"></div></div> 
  <div class="col-md-4"><div id="container3" style="height: 400px;border:1px solid;"></div></div>
  </div>
  </div>


</body>
</html>