15

我想知道是否有人成功地使用 Highcharts 实现了响应式设计，以使他们的图表在移动和桌面上看起来都很好。

默认情况下，当您调整浏览器屏幕的大小时，Highcharts 会重新缩放，只是 X 轴被刻度标记文本弄乱了，条形图看起来又高又瘦（太压缩）。要了解我的意思，您可以转到此页面并调整浏览器的大小。

我认为这些问题可以通过将数据点的数量减少到原始数量的 1/3 来解决，尽管我想知道如何使用 Highcharts 的 API 以编程方式完成。如果这听起来不是一个好主意，我也对人们可能提出的其他想法或解决方案感兴趣，以便在移动设备上使用 Highcharts（或者甚至可能更容易实现多设备解决方案的不同 JS 图表库） ？）。

4

5 回答 5

20

解决方案似乎相当简单。

只是不要给图表一个固定的宽度，即不要定义宽度或设置width:100%，并且与我提到的演示不同，条形图宽度和伴随的条形将随着浏览器宽度的减小而缩小。

于 2013-02-03T16:43:41.760 回答
4

这可能取决于您显示的图表类型。在移动设备上，如果您要显示柱形图，您可能需要旋转图表以使其变为条形图。

如果您要显示折线图，则可以“确定”数据范围，以便仅显示获得该点所需的最少点数。放大时，重新调整数据范围以适合当前视图。这可以使用一些事件结合一些手卷js来完成。

于 2012-07-12T19:39:49.467 回答
2

您可以设置图表容器 div width:100%。然后只需删除 highchart 宽度属性。我为迷你图解决了这个问题。现在它是移动响应的。

Highcharts.chart('my-sparkline-chart, {
        chart: {
            type: 'areaspline',
            height: '70',
            //width: '189', //comment width property.
            spacing: [0, 0, 0, 0],
            backgroundColor: "transparent"
        }
...
于 2017-10-09T07:36:21.833 回答
1

带引导程序的示例

 <!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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="http://populationpyramid.net/germany/2015/">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="http://populationpyramid.net/germany/2015/">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>
于 2017-09-11T17:58:59.580 回答
0

尝试将其添加到<head></head>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
于 2018-03-29T05:07:03.067 回答