html - 使用 High Charts 和 Bootstrap 3 的响应式折线图

Question

目前我的 HighChart 折线图如下:

<script language="javascript" type="text/javascript">

    var highColors = [bgSystem, bgSuccess, bgWarning, bgPrimary];

    // Chart data
    var seriesData = [{
        name: 'Total Accounts',
        data: [5, 9, 12, 15, 17, 22, 28, 30, 34, 36, 38, 46]
    }, {
        name: 'Total Songs',
        data: [2, 3, 4, 5, 8, 12, 17, 23, 30, 34, 44]
    }, {
        name: 'Total Recordings',
        data: [15, 19, 22, 29, 32, 34, 36, 40, 42, 44, 45]
    }, {
        name: 'Total Writers',
        data: [11, 13, 15, 18, 24, 28, 30, 34, 38, 40, 42, 45]
    }];

    var dashboardChart = $('#dashboard_chart');
    if (dashboardChart.length) {
        dashboardChart.highcharts({
            credits: false,
            colors: highColors,
            chart: {
                backgroundColor: 'white',
                className: '',
                type: 'line',
                zoomType: 'x',
                panning: true,
                panKey: 'shift',
                marginTop: 45,
                marginRight: 1,
            },
            title: {
                text: null
            },
            xAxis: {
                gridLineColor: '#EEE',
                lineColor: '#EEE',
                tickColor: '#EEE',
                categories: ['Jan', 'Feb', 'Mar', 'Apr',
                    'May', 'Jun', 'Jul', 'Aug',
                    'Sep', 'Oct', 'Nov', 'Dec'
                ]
            },
            yAxis: {
                min: 0,
                tickInterval: 5,
                gridLineColor: '#EEE',
                title: {
                    text: 'Total'
                }
            },
            plotOptions: {
                spline: {
                    lineWidth: 3,
                },
                area: {
                    fillOpacity: 0.2
                }
            },
            exporting: {
                enabled: false
            },
            legend: {
                enabled: true,
                floating: false,
                align: 'right',
                verticalAlign: 'top',
                x: -5
            },
            series: seriesData
        });
    }
</script>

这是它在我的 HTML 中的显示方式

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div id="dashboard_chart" style="height: 500px; width:100%;"></div>
    </div>
</div>

主要问题是图形不适合平板电脑的整个容器(纵向和横向)。有没有人有什么建议？至于如何在不添加内联样式的情况下使其具有响应性？

Answer 1

您可以在高级图表初始化中设置响应式图表的选项。它允许您指定不同的宽度和高度，并且您可以指定不同的值，例如隐藏标签或显示某些内容。

dashboardChart.highcharts({
 options:values,
 options:values,
 ....
 ....
 responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                align: 'center',
                verticalAlign: 'bottom',
                layout: 'horizontal'
            },
            yAxis: {
                labels: {
                    align: 'left',
                    x: 0,
                    y: -5
                },
                title: {
                    text: null
                }
            },
            subtitle: {
                text: null
            },
            credits: {
                enabled: false
            }
        }
    }]
}

})

这是他们官方文档的链接:https://www.highcharts.com/demo/responsive