javascript - 在 highchart 中设置左右边距

Question

我已经创建了一个图表并遇到了一个问题。目前图表似乎并没有完全从图表框的开头开始。如何让我的区域 Highcharts 从图表框开始并在图表框结束的地方结束？

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