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>

我在这里指出了关键点

enter image description here

Answer 1

我认为剪切线来自您的配置中有5px lineWidth的事实。因此，为了不剪切线，需要将其放置在现在位置下方3px处，以便顶部有2个像素（顶部2个像素+底部2个像素+像素位置= 5个像素）。

let B = [97,97,97];

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

请注意，您还可以增加图形的最大大小（yAxis.max）：https://jsfiddle.net/sk4n9gp0/