在highchart中設置左右邊距

Question

我創建了一個圖表，但遇到了問題。 目前，圖表似乎並未完全從圖表框的開頭開始。 如何使我的區域高圖在圖表框開始並在圖表框結束處結束？

 $(function() { $('#chart-container').highcharts({ chart: { type: 'area', renderTo: 'container', margin: [0,0,0,0] }, title: { text: '', x: -20 //center }, subtitle: { text: '', x: -20 }, exporting: { enabled: false }, xAxis: { categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'Septemper', 'Oktober', 'November', 'December'], "tickWidth": 0, lineWidth: 0, minorGridLineWidth: 0, labels: { enabled: false }, }, yAxis: { gridLineWidth: 0, minorGridLineWidth: 0, title: { text: '' }, labels: { enabled: false }, }, tooltip: { valueSuffix: ' Kr.' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, credits: { enabled: false }, series: [{ showInLegend: false, name: 'Profit', data: [0.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], color: '#cc0000', }] }); }); 

  .t-box { background-color: #fff; border: 1px solid #cccccc; float: left; width: 100%; height: auto; } .chart-box { width: 100%; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div class="t-box"> <div class="chart-box"> <div id="chart-container" style="min-width: 310px; height: 100%; margin: 0 auto"></div> </div> </div> 

Answer 1

問題不是您的利潤，而是Highcharts設置xAxis刻度的地方。 最簡單的解決方法是設置最小值/最大值。

 $(function() { $('#chart-container').highcharts({ chart: { type: 'area', renderTo: 'container', margin: [0, 0, 0, 0] }, title: { text: '', x: -20 //center }, subtitle: { text: '', x: -20 }, exporting: { enabled: false }, xAxis: { categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'Septemper', 'Oktober', 'November', 'December'], "tickWidth": 0, lineWidth: 0, minorGridLineWidth: 0, labels: { enabled: false }, min: 0.5, //<- added this max: 10.5 }, yAxis: { gridLineWidth: 0, minorGridLineWidth: 0, title: { text: '' }, labels: { enabled: false }, }, tooltip: { valueSuffix: ' Kr.' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, credits: { enabled: false }, series: [{ showInLegend: false, name: 'Profit', data: [0.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], color: '#cc0000', }] }); }); 

 .t-box { background-color: #fff; border: 1px solid #cccccc; float: left; width: 100%; height: auto; } .chart-box { width: 100%; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div class="t-box"> <div class="chart-box"> <div id="chart-container" style="min-width: 310px; height: 100%; margin: 0 auto"></div> </div> </div>