Избегайте отображения метки оси Y и точек, когда нет данных: HIghcharts

Я пытаюсь построить гистограмму с накоплением, используя 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 setstate highcharts angular2-highcharts react-highcharts
person VJR08    schedule 31.12.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте этот код. Он будет работать для вас.

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

person Komal Sakhiya    schedule 31.12.2019

arrow_upward
1
arrow_downward

Вы также можете добавить функцию проверки внутри обратного вызова рендеринга, чтобы скрыть все свойства yAxis, когда dataMax равен 0.

Демонстрация: 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< /а>

person Sebastian Wędzel    schedule 31.12.2019