如何獲得帶有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> 

這是我的代碼的一個小問題

Answer 1

我通過對圖表進行一些更改來解決它。 這些是我改變的事情：

在JS文件中：

chart: {
           renderTo: 'chartcontainer'
       }

在HTML文件中：

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

在CSS文件中：

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

這是jsfiddle 。