最大值 (100) 的 Highcharts 问题 - React

Question

当我将 highchart 中的数据值设置为 100 时，换行符，这就是我的意思：

看看当两个值都是 100 时，线条有点断，并且它的宽度与非 100 的值不同，这意味着它可能由于某种原因在顶部断了。我尝试了一切来解决这个问题，我尝试使用官方文档中的属性来修复它：https://api.highcharts.com/highcharts/，但没有运气。

这是我的代码：

function PopularityGraph({ data }) {
  const [state, setState] = useState({ lineChart: {} });

  const splitEmptyData = series => {
    const index = series.findIndex(item => item.y !== 0);
    if (index > 0) {
      const dataNonEmpty = series.slice(index);
      const dataEmpty = series.slice(0, index).map(item => ({ ...item, y: dataNonEmpty[0].y }));
      return [{ data: dataNonEmpty }, { data: dataEmpty, dashStyle: "dot", states: { hover: { enabled: false } } }];
    } else {
      return [{ data: series }];
    }
  };

  useEffect(() => {
    const regressionResult = regression.linear(
      Object.keys(data).map((item, index) => {
        return [index, data[item]];
      })
    );

    const split = splitEmptyData(
      Object.keys(data).map(item => {
        return { x: parseInt(item), y: data[item] };
      })
    );

    setState({
      ...state,
      lineChart: {
        chart: {
          type: "line",
        },
        title: {
          text: null,
        },
        xAxis: {
          lineWidth: 0,
          type: "datetime",
          tickLength: 0,
          labels: {
            y: 30,
            formatter: function() {
              return dayjs.unix(this.value).format("MMM 'YY");
            },
          },
        },
        yAxis: [
          {
            lineWidth: 0,
            max: 100,
            min: 0,
            title: {
              text: "Popularity",
            },
            labels: {
              formatter: function() {
                return shortenNumbers(this.value);
              },
            },
          },
        ],

        plotOptions: {
          series: {
            states: { hover: { enabled: false } },
            marker: {
              enabled: false,
            },
            events: {
              legendItemClick: function(e) {
                e.preventDefault();
              },
            },
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: "Popularity",
            color: "#19a049",
            ...split[0],
          },
          {
            name: "Popularity",
            color: "#19a049",
            ...split[1],
          },
          {
            marker: { enabled: false },
            showInLegend: false,
            data: Object.keys(data).map((item, index) => {
              return [parseInt(item), index * regressionResult.equation[0] + regressionResult.equation[1]];
            }),
            type: "area",
            fillOpacity: 0.2,
            threshold: -Infinity,
            dashStyle: "dash",
            lineWidth: 1,
            enableMouseTracking: false,
            color: "#acf1c4",
          },
        ],
        tooltip: {
          useHTML: true,
          shared: true,
          crosshairs: {
            color: "#707580",
            dashStyle: "dash",
            width: 1.5,
          },
          formatter: function() {
            return `
            <div class="graph-tooltip has-shadow">
              <time class="year">${dayjs.unix(this.x).format("MMMM")} ${dayjs.unix(this.x).format("YYYY")}</time>
              <div class="channel-value">Popularity: ${
                split[1] && this.points[0].x <= split[1].data[split[1].data.length - 1].x
                  ? "No data available"
                  : "<strong>" + shortenNumbers(this.points[0].y) + "</strong>"
              }</div>
            </div>`;
          },
        },
      },
    });
  }, [data]);

  return (
    <div className="graph">
      <HighchartsReact highcharts={Highcharts} options={state.lineChart} />
    </div>
  );
}

PopularityGraph.propTypes = {
  data: PropTypes.object,
};

export default PopularityGraph;

唯一“有效”的“修复”是当我在 yAxis 属性内将最大值设置为 101 时，但我的图表如下所示：

这不是我想要的，因为不仅左边的轴显示 120 作为最大值，而且如果你明白我的意思的话，它也离顶部太远了。

如果有人知道问题出在哪里，我将不胜感激。

P.S。英语不是我的主要语言，因此对于任何语法错误我深表歉意。

Answer 1

您可以将 clip 选项设置为 false:

  plotOptions: {
    series: {
      clip: false
    }
  }

API参考： https://api.highcharts.com/highcharts/plotOptions.line.clip

演示： https://jsfiddle.net/BlackLabel/pgs4yjce/

另一种方法是删除 yAxis.max，将 endOnTick 设置为 false 并将 maxPadding 设置为适当的值。

  yAxis: {
    endOnTick: false,
    maxPadding: 0.05, // sample value
    min: 0,
  }

演示： https://jsfiddle.net/BlackLabel/kduycew8/

最大值 (100) 的 Highcharts 问题 - React

Highcharts issue with max value (100) - React

reactjs

highcharts

react-highcharts