想要将 y 轴刻度设置为固定值 Highcharts答案

【问题标题】：Want to set the y axis ticks to a fixed value Highcharts想要将 y 轴刻度设置为固定值 Highcharts
【发布时间】：2020-06-02 11:54:39
【问题描述】：

我正在尝试基于数据点的折线图和面积图的组合。

在图 1 中，Y 轴看起来很笨拙，有很多刻度。有没有办法可以将这些刻度设置为 y 轴上的“3”。对于任何数据点，这应该保持不变，滴答应始终为 3

在图 2 中，还有一条额外的水平线，低于 0。有什么办法可以避免它，所以参考总是从 0 开始，而不是低于 0 的线。

沙盒链接：https://codesandbox.io/s/react-line-chart-n9g6o?file=/src/LineChart.js

import * as React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HC_exporting from "highcharts/modules/exporting";
HC_exporting(Highcharts);

function LineChart(props) {
  let chartOptions = {
    chart: {
      type: "line",
      height: props.height
    },
    legend: {
      align: "center",
      verticalAlign: "bottom",
      x: 0,
      y: 0
    },
    tooltip: {
      shared: true,
      useHTML: true,
      formatter: function() {
        let self = this;
        let formattedString = "<small></small><table>";
        self.points.forEach(elem => {
          formattedString +=
            '<tr><td style="color: {series.color}">' +
            elem.series.name +
            ": </td>";
          formattedString +=
            '<td style="text-align: right"><b>' +
            elem.y +
            " (" +
            elem.point.ts +
            ")</b></td></tr>";
        });
        return formattedString;
      }
    },
    colors: props.legendColor,
    xAxis: {
      visible: true,
      step: 1,
      tickInterval: 6,
      categories: props.categories
    },
    yAxis: {
      visible: true,
      step: 1,
      tickInterval: 1,
      title: {
        enabled: true,
        text: "Value",
        style: {
          fontWeight: "100"
        }
      }
    },
    plotOptions: {
      column: {
        dataLabels: {
          enabled: true,
          crop: false,
          overflow: "none"
        }
      },
      line: {
        marker: {
          enabled: false
        }
      }
    },
    series: props.chartData
  };
  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
}

export default LineChart;

【问题讨论】：

标签： javascript reactjs highcharts highcharts-ng react-highcharts

【解决方案1】：

在图 1 中，Y 轴看起来很笨拙，有很多刻度。有没有办法这些刻度可以设置为 y 轴上的“3”。这应该对于任何数据点保持不变，刻度应始终为 3

使用tickAmount属性：

yAxis: {
  tickAmount: 3,
  ..
}

API 参考： https://api.highcharts.com/highcharts/yAxis.tickAmount

同样在图 2 中，还有一条额外的水平线，低于 0。是有什么办法可以避免它，所以引用总是从 0 比低于 0 的行数。

是的，例如，您可以设置softMax 属性。如果只有 0 个值，Highcharts 无法计算轴刻度。

yAxis: {
  softMax: 1,
  ...
}

API 参考： https://api.highcharts.com/highcharts/yAxis.softMax

【讨论】：