javascript - Highchart spline 达到最大刻度值时切断。怎么可能固定？我在正文上附上了可能的示例代码

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>

在这里我指出了切割线

在此处输入图像描述

标签： javascripthighcharts

Answer 1

将 设置series.clip为 false 是您正在寻找的解决方案。

演示：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