在highchart中设置左右边距

Question

i've created a highchart and have reached a problem. 我创建了一个图表，但遇到了问题。 At the moment the chart does not seem to start exactly at the beginning of the chart-box. 目前，图表似乎并未完全从图表框的开头开始。 How can make my area highchart begin at the chart-box and end where the chart-box is ending? 如何使我的区域高图在图表框开始并在图表框结束处结束？

 $(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

The problem is not your margins but where Highcharts is setting up the xAxis ticks. 问题不是您的利润，而是Highcharts设置xAxis刻度的地方。 Easiest fix is to set min/max values. 最简单的解决方法是设置最小值/最大值。

 $(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>

在highchart中设置左右边距

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-01-12 00:42:40

在highchart中设置左右边距

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-01-12 00:42:40

解决方案1
2 已采纳 2015-01-12 00:42:40