Question

区域图表两侧的填充太多，而minPadding / maxPadding不适用于类别。

我希望区域图表的开始和结束没有任何填充。

我的代码如下：

$('#container').highcharts({
  chart: {
    type: 'area',
    inverted: false
  },
  title: {
    text: 'Too Much Padding On Either Side'
  },
  plotOptions: {
    series: {
      fillOpacity: 0.1
    }
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'Data Point'
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    pointFormat: '<b>{point.y}</b> points'
  },
  series: [{
    name: 'Visits',
    data: [
      ["Monday", 58],
      ["Tuesday", 65],
      ["Wednesday", 55],
      ["Thursday", 44],
      ["Friday", 56],
      ["Saturday", 65],
      ["Sunday", 69]
    ],
    dataLabels: {
      enabled: false,
      rotation: -90,
      color: '#FFFFFF',
      align: 'right',
      format: '{point.y:.1f}',
      y: 10,
      style: {
        fontSize: '14px',
        fontFamily: 'Verdana, sans-serif'
      }
    }
  }]
});

Answer 1

我的一位同事为我的一些图表解决了这种情况。他们的解决方案是从x轴移除type: 'category'（改为使其成为linear类型），而是从数组中替换轴标签。

以下是改变的内容：

首先，我添加了一个x轴标签数组。

var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday",
"Saturday","Sunday"];

接下来，我更新了系列值以仅保留y轴值。

series: [{
  name: 'Visits',
  data: [58, 65, 55, 44, 56, 65, 69],

然后，对于你的x轴，我包含一个formatter函数来从数组中提取标签，作为默认线性值的替代。

xAxis: {
  labels: {
    formatter: function(){
      return categoryLabels[this.value];
    }
  }
},

最后，我更新了tooltip选项以显示标签数组中的值。

    tooltip: {
        formatter: function () {
            return categoryLabels[this.x] + ': ' + Highcharts.numberFormat(this.y,0);
        }
    },

我用这个调整更新了你的小提琴：http://jsfiddle.net/brightmatrix/nx4xeb4k/4/

我希望你会发现这个解决方案和我一样有用！

Answer 2

根据API，highcharts.xAxis.tickmarkPlacement的默认值为between，这就是为什么每个类别的点在图表中xAxis的两个刻度之间下降。< / p>

通过将highcharts.xAxis.tickmarkPlacement设置为on并使用highcharts.xAxis.min和highcharts.xAxis.max之类的值this，您应该能够达到您想要的效果。

Answer 3

您可以声明最小/最大值来解决问题。

var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]; 
//....
xAxis: {
  min: 0.49,
  max: categoryLabels.length - 1.49,
  categories: categoryLabels, 
  type: 'category'
},

示例：

http://jsfiddle.net/fo04m7k7/

如何从Highcharts区域类别图表的两侧删除填充？

3 个答案: