#はじめに
react-apexchartsを用いてグラフの描画を行っています。
データが無いときに、「まだデータがありません」というテキストを表示させるのに少し手間取ったのでメモします。
#option: noDataを使う
データが無いときのテキストの指定には、noData
というoptionを使います。
以下は円グラフをReactで表示させるときの例です。
グラフの代わりに「データがありません」のテキストを表示できます。
PieCharts.js
import React from 'react';
import Chart from 'react-apexcharts';
const PieCharts = (props) => {
const [options, setOptions] = useState({
labels: ['A', 'B', 'C', 'D'],
colors: ['#FADE03','#33691E', '#0D47A0', '#B71C1C'],
noData: {
text: 'データがありません' //noDataにデータが無いときに表示するテキストを指定する
}
})
const [series, setSeries] = useState([]) // seriesに[]を渡す→データなし
return (
<React.Fragment>
<Chart
options={options}
series={series}
type="pie"
/>
</React.Fragment>
);
}
export default PieCharts
#noDataに指定できる項目
noDataには以下の設定をすることでテキストの表示を編集できます。
詳細は公式をご確認ください。
noData.js
noData: {
text: undefined,
align: 'center', //または left, right
verticalAlign: 'middle', //または top, bottom
offsetX: 0,
offsetY: 0,
style: {
color: undefined,
fontSize: '14px',
fontFamily: undefined
}
}
#noDataが適用されるときの条件
noDataに指定したテキストが表示される条件は、
__series
の値が[]
となっていること__です。
series
がundefined
, null
, 0
となっているときは適用されません。
私はここでつまづきました・・・。
#参照した記事
・apexcharts公式
・公式のissue→noDataの適用条件がコメントされています。