reactjs - 避免在没有数据时显示 y 轴标签和点:HIghcharts
问题描述
我正在尝试使用 highcharts 绘制堆积条形图。当图表没有数据时,我需要避免 y 轴标签“计数”和 y 轴的范围。但是当有一些数据时需要带回标签以及值。有人可以帮我弄这个吗
沙盒:https ://codesandbox.io/s/craky-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} />
</>
);
}
}
解决方案
试试这个代码。它会为你工作。
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);
推荐阅读
- openshift - 使用 openshift 和 unix 管道
- android - 如何从 RecyclerView ListAdapter 按位置获取项目?
- python - 有没有更好的方法来删除搁置中键的特定值?
- c# - 在c#中取消后如何重新启动CancellationTokenSource?
- javascript - 为什么这个 DOM 代码没有出现在页面上?
- java - Java:无法在 Windows 10 上打开 COM 端口
- swift - Swift 编译器说的关于 Bool("") 的奇怪消息是什么意思?
- c# - 如何在 ASP.Net Core 中使用 Google.Protobuf.WellknownTypes.Struct
- r - 在选择列 x 中的特定行后如何从列 y 中提取信息
- javascript - 在javascript结构中查找最近的最低日期