Сплайн Highchart обрезается при достижении максимального значения масштаба. Как это исправить ?. Я прикрепил образец кода на теле

Question

Я использую плагин highcharts для создания диаграммы. Но у меня возникают проблемы. Мой сплайн Highchart обрезается при достижении максимального значения масштаба. Как это возможно и как это исправить?

Я создал демонстрационный пример для этой диаграммы, а также прикрепил снимок экрана к точке сплайна среза. Вот мой демонстрационный код:

let chartdata = [];
let A = [95, 95, 95];
let B = [50, 100, 100];

var colorBand = [{
    color: "red",
    to: 0,
    from: 20
  },
  {
    color: "green",
    to: 21,
    from: 40
  },
  {
    color: "blue",
    to: 41,
    from: 60
  },
  {
    color: "orange",
    to: 61,
    from: 90
  },
  {
    color: "yellow",
    to: 91,
    from: 100
  },
];


chartdata.push({
  name: 'A',
  type: 'column',
  date: 'A',
  data: A,
  color: 'red',
});

chartdata.push({
  name: 'B',
  type: 'spline',
  date: 'B',
  data: B,
  color: 'blue'
});

Highcharts.chart('container', {
  chart: {
    height: 205,
    width: 200,
    background: '#F2F2F2'
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  legend: {
    align: "center",
    layout: "horizontal",
    verticalAlign: "bottom",
    symbolHeight: 10,
    symbolWidth: 10,
    symbolRadius: 0,
    itemStyle: {
      fontSize: "13px",
      fontWeight: 'bold',
      fontFamily: '"Arial", sans-serif'
    }
  },
  xAxis: {
    labels: {
      style: {
        fontSize: "11px",
        fontFamily: '"Arial", sans-serif',
        color: "#000"
      }
    },
    gridLineColor: "transparent",
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: "#9A9A9A",
    zIndex: 9999999,
    minorTickLength: 0,
    tickLength: 0,
    style: {
      fontSize: "11px",
      fontWeight: "bold",
      fontFamily: '"Arial", sans-serif',
      color: "#000"
    }
  },

  yAxis: [{
      gridLineWidth: 0,
      labels: {
        style: {
          fontSize: "12px",
          color: "#000",
          fontFamily: '"Arial", sans-serif'
        }
      },
      title: {
        text: ''
      },
      min: 0,
      plotBands: colorBand,
      width: 20,
      max: 100,
      tickInterval: 20
    },
    {
      linkedTo: 0,
      gridLineWidth: 0,
      lineColor: "transparent",
      title: {
        text: ""
      },
      labels: {
        enabled: false
      }
    }
  ],
  plotOptions: {
    series: {
      states: {
        hover: {
          enabled: false,
        },
        inactive: {
          opacity: 1
        }
      },
      pointPadding: 0.1,
      groupPadding: 0,
      lineWidth: 5,
      pointWidth: 25,
      enableMouseTracking: false,
      borderWidth: 1,
      borderColor: '#FFFFFF',
      threshold: 0, // let zero values have some height
      marker: {
        enabled: false,
        states: {
          hover: {
            //radius: 1
          }
        }
      },
      minPointLength: 10,
      events: {
        legendItemClick: function() {
          return false;
        }
      }
    }
  },
  series: chartdata
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

Здесь я указал на линию пореза

введите изображение описание здесь

Answer 1

Установка series.clip как ложь - это решение, которое вы ищете.

Демо: https://jsfiddle.net/BlackLabel/aph9tg78/

chartdata.push({
    clip: false,
  name: 'B',
  type: 'spline',
  date : 'B',
  data : B,
  color: 'blue'
});

Упрощенное демо: https://jsfiddle.net/BlackLabel/483obfrw/

API: https://api.highcharts.com/highcharts/series.line.clip

Answer 2

Я думаю, что линия разреза происходит из-за того, что в вашей конфигурации ширина линии составляет 5 пикселей. Итак, чтобы линия не обрезалась, вам нужно поместить ее на 3 пикселя ниже того места, где она сейчас находится, чтобы у нее было 2 пикселя вверху (2 пикселя вверху + 2 пикселя внизу + его положение в пикселях = 5 пикселей).

let B = [97,97,97];

jsfiddle: https://jsfiddle.net/8w5roqpt/

Обратите внимание, что вы также можете увеличить максимальный размер вашего графика (yAxis.max): https://jsfiddle.net/sk4n9gp0/