Как скрыть выступ линии сетки в гистограмме - PullRequest
0 голосов
/ 10 января 2019

Я использую Highcharts и хочу скрыть выступ линии сетки за пределами области графика. Я имею в виду,

теперь это выглядит так: enter image description here

и я хочу, чтобы это выглядело так (выступ линии сетки в правой части диаграммы скрыт):

enter image description here

Конфигурация старших карт ниже:

{
  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,
}

1 Ответ

0 голосов
/ 10 января 2019

Возможно, однако, сделать это не так просто и интуитивно, как вы ожидаете в 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...