highcharts折线图基本使用

这次需求里面有一个折线图，画完，发现设置max值，但数据里面同时有多个数据为max值，连接起来得线会只显示一半，查了好久没有解决，最后再highcharts社区提问后，大佬给出了解决方案

简数社区。大家要是遇到了问题，也可以去社区看看。

 可以很清晰得看到，线条得区别。最开始想得是把线条宽度调整，结果线显示效果只是同比变细了，其他方面没有区别。

 下面是这次我再写得时候使用得配置，效果是一个简单得折线图。

        const options = {
      chart: { // 图表配置
        height: 250, // 绘制区高度
        zoomType: 'x', // 缩放方式，延水平缩放
        resetZoomButton: { // 缩放之后会出现得按钮，允许用户重置缩放比例 这里是重置原始按钮样式
          theme: {
            fill: 'white',
            r: 4,
            style: {
              color: 'rgba(0, 0, 0, 0.65)',
            },
            states: {
              hover: {
                fill: 'white',
                stroke: '#008cff',
                style: {
                  color: '#008cff',
                },
              },
            },
          },
        },
      },
      title: null, // 图标标题
      xAxis: { // x轴配置
        title: null,
        labels: {// 用label里边的formatter代替categories，解决原点作为起始点的问题
          align: 'center', // 设置x轴坐标文字的位置，在刻度的左边
          formatter() {
            return categories[this.value];
          },
          y: 20,
          style: { color: '#747A85' },
        },
        min: 0, // 让x刻度线 从原点开始
        tickInterval: 1, // x轴的刻度步数设置为1
        tickLength: 4, // 这个是刻度线得长度
        startOnTick: false, // 起始与刻度线
      },
      yAxis: [
        {
          title: {
            text: '',
          },
          tickAmount: 6, // 水平方向有多少根线。
          min: 0,
          gridLineDashStyle: 'Dash', // 水平线得类型， 这里是虚线
          alternateGridColor: null,
          max: 100,
          labels: { // Y轴刻度展示文案
            format: '{value} %',
            style: { color: '#747A85' },
          },
          plotBands: [{ // 定义不同得区域颜色
            from: 0,
            to: 20,
            color: 'rgba(49, 195, 130, 0.06)',
          }, {
            from: 20,
            to: 40,
            color: 'rgba(85, 143, 241, 0.06)',
          }, {
            from: 40,
            to: 60,
            color: 'rgba(85, 143, 241, 0.06)',
          }, {
            from: 60,
            to: 80,
            color: 'rgba(245, 67, 70, 0.06)',
          }, {
            from: 80,
            to: 100,
            color: 'rgba(245, 67, 70, 0.06)',
          }],
        },
      ],
      tooltip: { // 数据提示框
        enabled: true, // 是都展示，默认展示
        shared: true, // 提示框被共享时，整个绘图区都将捕捉鼠标指针的移动
        backgroundColor: '#fff', // 背景颜色
        borderColor: '#fff', // 边框颜色
        animation: true, // 是否启用动画效果
        padding: 12,
        useHTML: true, // 内部可以解析html标签
        formatter() {
          let s = `<span style="text-align:left;margin:0 auto;display:inline-block;width:100%">${categories[this.x]}</span><br/>`;
          this.points.forEach((item) => {
            s += `<span  style="color: ${item.color};margin-right:8px;">\u25CF</span> ${item.series.name}: ${item.y}%<br/>`
          })
          return s;
        },
        style: {
          fontSize: '14px',
          lineHeight: '26px',
          textAlign: 'left',
          color: '#222833',
        },
      },
      plotOptions: { // 数据列得配置
        series: {
          marker: { // 数据点 就是线上得小圆点
            enabled: false, 
          },
        },
        line: {
          clip: false,
        },
      },
      series: [{// 每个数据的配置
        name: '', // 曲线代表的图例
        color: '#2B8AE8', // 曲线颜色
        data: ballFriendTrend, // 数据值
        clip: false,//允许在整个打印区域中进行系列渲染 主要就是这个属性能解决峰值线溢出不展示问题
        // 注意这个属性会影响缩放功能
        fillColor: { // 设置渐变的填充颜色
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1,
          },
          stops: [
            [0, 'rgba(24,144,255,0.2)'],
            [1, '#fff'],
          ],
        },
      }],
      legend: { // 图例
        selectedMode: false,
        enabled: false,
      },
      credits: {
        enabled: false, // 禁用版权信息
      },
    };