Highcharts在第一个柱之前和之后移除空间

时间:2016-12-25 22:27:15

标签: javascript highcharts

我正在尝试删除此图表http://jsfiddle.net/bfa1o0ar/7/顶部和底部的空格。它是在第一个柱之前和最后一个柱之后的间距。我试过删除填充,边距等。

$(function() {
  Highcharts.chart('container', {
    chart: {
        marginTop: 0,
      marginBottom: 0,
      spacingTop: 0,
      spacingBottom: 0,
      type: 'bar',
      title: {
        text: ''
      }
    },
    credits: {
      enabled: false
    },
    title: {
      text: null
    },
    xAxis: {
      minPadding:0,
      maxPadding:0,
        lineWidth: 0,
        gridLineWidth: 0,
      tickWidth: 0,
      tickAmount: 0,
      tickmarkPlacement: 'on',
      categories: ['1-3', '4-7', '7-10', '11-14', '15-20'],
      allowDecimals: false,
    },
    yAxis: {
      minPadding:0,
      maxPadding:0,
        lineWidth: 0,
        gridLineWidth: 0,
      endOnTick: false,
      showFirstLabel: false,
      showLastLabel: false,
      startOnTick: false,
      tickWidth: 0,
      tickAmount: 0,
      //tickmarkPlacement: 'between',
      min: 0,
      allowDecimals: false,
      title: {
        text: ''
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      column: {
        groupPadding: 0,
        pointPadding: 0,
        //pointWidth: 35, // width of bar
        pointRange: 0
      },
      series: {
        pointPadding: 0.1,
        groupPadding: 0,
        borderWidth: 0,
        //pointWidth: 30,
        shadow: false,
        stacking: 'normal',
        dataLabels: {
          align: 'right',
          enabled: false,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        },
      }
    },
    series: [{
      name: 'John',
      data: [5, 3, 4, 7, 2]
    }]
  });
});

1 个答案:

答案 0 :(得分:1)

将x轴的最小值/最大值设置为first category index + 0.1last category index - 0.1

  min: 0 + 0.1,
  max: 4 - 0.1
},

示例:http://jsfiddle.net/bfa1o0ar/8/