Question

我正在使用Highcharts，并希望将网格线的突出部分隐藏在图形区域之外。我的意思是，

现在看起来像这样：

，我希望它看起来像这样（图表右侧的网格线的突出部分已隐藏）：

highcharts配置如下：

{
  chart: {
    width: 420,
    height: 350,
    style: {
      textAlign: 'center',
      'text-align': 'center',
    },
  },
  colors: ['#a1cbff'],
  title: {
    text: undefined,
  },
  xAxis: {
    title: { text: undefined },
    tickInterval: 0.1,
    max: 1,
    min: 0,
    gridLineWidth: 1,
  },
  yAxis: [{
    title: { text: undefined },
  }],
  series: [{
    type: 'column',
    pointPlacement: 'between',
    data: [...SOME_DATA],
  }],
  plotOptions: {
    column: {
      pointPadding: 0,
      borderWidth: 1,
      groupPadding: 0,
      shadow: false,
    },
  },
  tooltip: {
    formatter() { return this.y; },
  },
  legend: {
    enabled: false,
  },
  exporting: false,
  credits: false,
}

Answer 1

但是，它可能并非如您在Highcharts中所期望的那样简单直观。查看下面发布的演示和代码，您将找到带有pointRange = 0.1，pointPlacement = -0.5，min: 0.05，max: 0.95和tickInterval = 0.1的解决方案。

代码：

Highcharts.chart('container', {
  chart: {
    width: 420,
    height: 350,
    style: {
      textAlign: 'center',
      'text-align': 'center',
    },
  },
  colors: ['#a1cbff'],
  title: {
    text: undefined,
  },
  yAxis: [{
    title: {
      text: undefined
    }
  }],
  xAxis: {
    min: 0.05,
    max: 0.95,
    tickInterval: 0.1
  },
  series: [{
    type: 'column',
    pointPlacement: -0.5,
    pointRange: 0.1,
    data: [
      [0.1, 130],
      [0.2, 110],
      [0.3, 240],
      [0.4, 150],
      [0.5, 250],
      [0.6, 190],
      [0.7, 240],
      [0.8, 220],
      [0.9, 270],
      [1, 160]
    ],
  }],
  plotOptions: {
    column: {
      pointPadding: 0,
      borderWidth: 1,
      groupPadding: 0,
      shadow: false,
    },
  },
  tooltip: {
    formatter() {
      return this.y;
    },
  },
  legend: {
    enabled: false,
  },
  exporting: false,
  credits: false,
});

演示：
https://jsfiddle.net/BlackLabel/wtxd9y2f/

API参考：
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement

如何在条形图中隐藏网格线突出

1 个答案: