javascript - 如何获得带有 highcharts 的响应式图表？

Question

基本上，我有一个容器，分为 col-xs-3、col-xs-7(保存图表)和 col-xs-2 ，下面还有三个具有相同引导类的表(col-xs -3，...)。在容器上，我有一个使用 highcharts 创建的图表，我希望它与下面的表格对齐(如紫色箭头所示)，这就是我想要的结果，并且在窗口宽度变化时也能做出响应:

现在我的情况是这样的:

我已经尝试过一些方法，例如将图表向左移动、在不同媒体查询上缩放图表，但这些方法仅适用于某些特定宽度。

Highcharts.chart('container', {
                chart: {
                    renderTo: ''
                },
                title: {
                    text: ''
                },

                credits: {
                    enabled: false
                },

                xAxis: {
                    lineWidth: 0,
                    minorTickLength: 0,
                    tickLength: 0,
                    labels: {
                        rotation: -45,
                        enabled: false
                    },
                    //maxZoom: 24 * 3600 * 1000 * 30, // fourteen days
                    title: {
                        //text: 'sample'
                    }
                },
                yAxis: {
                    min: 0,
                    max: 150,
                    tickInterval: 50,
                    gridLineWidth: 0,
                    lineWidth: 4,
                    plotLines: [{
                        color: '#ccc',
                        dashStyle: 'dash',
                        width: 2,
                        value: 100
                    }],
                    title: {
                        text: ''
                    },
                    labels: {
                        style: {
                            color: '#ccc'
                        },
                        formatter: function () {
                            if ('100' == this.value) {
                                return '<span style="fill: #000;">' + this.value + ' %</span>';
                            } else {
                                return this.value + ' %';
                            }
                        }
                    }
                },
                tooltip: {
                    shared: true,
                    formatter: function () {
                        var result = '<b>' + Highcharts.dateFormat('%b %e, %Y', this.x) + '</b>';
                        $.each(this.points, function (i, datum) {
                            result += '<br />' + Math.round(datum.y) + ' %';
                        });
                        return result;
                    }
                },
                legend: {
                    enabled: false,
                },
                plotOptions: {
                    line: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '',
                    data: [[0, 50.57],
                            [10, 50.63],
                            [20, 75.14],
                            [30, 100.08],
                            [40, 40.28],
                            [130, 68.25],
                            [140, 125.01], ],
                    lineWidth: 5,
                    threshold: 99,
                    step: 'center',
                    tooltip: {
                        valueDecimals: 2
                    }
                }]
            });

.empty {
  background-color: #f3f3f3;
  height: 250px;
}

.row {
  margin: 10px 0;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-3 empty"></div>

    <div class="col-xs-7" style="">
      <div id="container" style="height: 250px; width: 100%"></div>
    </div>

    <div class="col-xs-2 empty"></div>
  </div>
  <div class="row">
    <div class="col-xs-3 empty"></div>

    <div class="col-xs-7" style="">
        <div id=""></div>
    </div>

    <div class="col-xs-2 empty"></div>
  </div>
</div>

这是一个jsfiddle of my code

Answer 1

我通过对图表进行一些更改解决了这个问题。这些是我改变的事情:

在JS文件中:

chart: {
           renderTo: 'chartcontainer'
       }

在 HTML 文件中:

 <div id="container" style="height: 250px;width:calc(100% + 90px);"></div>

在 CSS 文件中:

.highcharts-container {
    left: -70px;
}

这是jsfiddle .