避免显示y轴标签并在没有数据时指向：图表

Question

我正在尝试使用高图绘制堆积的条形图。当没有图表数据时，我需要避免使用y轴标签“ Count”和从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} />
      </>
    );
  }
}

Answer 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

Answer 2

您还可以在render回调中添加检查功能，以在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