避免在没有数据时显示 y 轴标签和点：HIghcharts答案

【问题标题】：Avoid displaying y axis label and points when there is no data: HIghcharts避免在没有数据时显示 y 轴标签和点：HIghcharts
【发布时间】：2019-12-31 07:11:04
【问题描述】：

我正在尝试使用 highcharts 绘制堆积条形图。当图表没有数据时，我需要避免 y 轴标签“计数”和 y 轴的范围。但是当有一些数据时需要带回标签以及值。有人可以帮我解决这个问题吗

沙盒：https://codesandbox.io/s/cranky-thunder-edtcy

import React from "react";
import ReactDOM from "react-dom";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

const axisData = [
  "12/16/2019",
  "12/17/2019",
  "12/18/2019",
  "12/19/2019",
  "12/20/2019",
  "12/21/2019",
  "12/22/2019",
  "12/23/2019"
];
const seriesData = [
  { name: "item1", data: [0, 0, 0, 0, 0, 0, 0, 0] },
  { name: "item2", data: [0, 0, 0, 0, 0, 0, 0, 0] },
  { name: "item3", data: [0, 0, 0, 0, 0, 0, 0, 0] }
];
const options = {
  chart: {
    type: "column",
    height: 152
  },
  credits: false,
  exporting: { enabled: false },
  title: {
    text: ""
  },
  xAxis: {
    categories: axisData
  },
  yAxis: {
    stackLabels: {
      enabled: false,
      align: "center"
    },
    visible: true,
    title: { enabled: true, text: "Count" }
  },
  plotOptions: {
    column: {
      stacking: "normal"
    }
  },
  legend: {
    symbolRadius: 0
  },
  tooltip: { enabled: true },
  series: seriesData
};

class App extends React.Component {
  render() {
    return (
      <>
        <HighchartsReact highcharts={Highcharts} options={options} />
      </>
    );
  }
}

【问题讨论】：

标签： reactjs highcharts setstate angular2-highcharts react-highcharts

【解决方案1】：

试试这个代码。它会为你工作。

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
const axisData = [
  "12/16/2019",
  "12/17/2019",
  "12/18/2019",
  "12/19/2019",
  "12/20/2019",
  "12/21/2019",
  "12/22/2019",
  "12/23/2019"
];
const seriesData = [
  { name: "item1", data: [10, 0, 0, 0, 0, 0, 0, 0] },
  { name: "item2", data: [0, 0, 0, 0, 0, 0, 0, 0] },
  { name: "item3", data: [0, 0, 0, 0, 0, 0, 0, 0] }
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      options: {
        chart: {
          type: "column",
          height: 152
        },
        credits: false,
        exporting: { enabled: false },
        title: {
          text: ""
        },
        xAxis: {
          categories: axisData
        },
        yAxis: {
          stackLabels: {
            enabled: false,
            align: "center"
          },
          visible: false,
          title: { enabled: false, text: "Count" }
        },
        plotOptions: {
          column: {
            stacking: "normal"
          }
        },
        legend: {
          symbolRadius: 0
        },
        tooltip: { enabled: true },
        series: seriesData
      }
    };
  }
  componentWillMount() {
    seriesData.map(data => {
      data.data.map(item => {
        if (item != 0) {
          this.state.options.yAxis.visible = true;
          console.log("------", this.state.options.yAxis.visible);
        }
      });
    });
  }
  render() {
    return (
      <>
        <HighchartsReact highcharts={Highcharts} options={this.state.options} />
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

演示链接：https://codesandbox.io/s/ecstatic-oskar-se6pe

【讨论】：

【解决方案2】：

您还可以在渲染回调中添加检查功能，以在 dataMax 等于 0 时隐藏所有 yAxis 属性。

演示：https://codesandbox.io/s/smoosh-leftpad-jr49j

events: {
  render() {
    let chart = this,
      yAxis = chart.yAxis[0];

    if (!yAxis.dataMax) {
      yAxis.axisTitle.hide();
      yAxis.labelGroup.hide();
      yAxis.gridGroup.hide();
    } else {
      yAxis.gridGroup.show();
      yAxis.axisTitle.show();
      yAxis.labelGroup.show();
    }
  }
}

API：https://api.highcharts.com/highcharts/chart.events.render

【讨论】：