如何将Highcharts图表调整为自适应视图

Question

我有下面图表的代码，它们是一些水平条（见代码）。在桌面版本中，水平条纹很好，但在移动版本中我更喜欢条形垂直，以便更好地适应屏幕。如何让条形图在桌面中水平显示，而在移动设备中垂直显示？这个想法是，不仅酒吧而且传说也垂直。 TIA

//Grafica 1
$(function () {
    Highcharts.chart('grafica1', {
        chart: {
            type: 'bar',
            plotBackgroundColor: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: ' '
        },
        xAxis: {
            type: 'category',
            labels: {
              useHTML: true
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: null,
            },
            labels: {
                    enabled: false,
            }
        },
        legend: {
            enabled: false
        },
        tooltip: { 
            enabled: false 
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '({point.y:.1f} Million tones)%'
                }
            }
        },
        series: [{
            name: 'Production',
            colorByPoint: true,
            data: [{
                name: 'PACKAGING PAPERS<br>AND BOARDS',
                y: 49,
                color: '#005eb8',
            }, {
                name: 'CASE MATERIALS',
                y: 29.9,
                color: '#fff',
                borderWidth : 2,
                borderColor : '#005eb8'
            }, {
                name: 'OTHER PACKAGING & PAPER',
                y: 14.4,
                color: '#fff',
                borderWidth : 2,
                borderColor : '#005eb8'
            },{
                name: 'WRAPPINGS',
                y: 4.7,
                color: '#fff',
                borderWidth : 2,
                borderColor : '#005eb8'
            }]
        }]
    });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafica1" class="chart1Slide2"></div>

Answer 1

您可以使用eval(parse())选项在满足某些条件时应用不同的图表选项（例如，如果宽度低于500px）。

API参考：
http://api.highcharts.com/highcharts/responsive

例：
http://jsfiddle.net/u81kfa4k/