様々なグラフを作成してみることができます。
<style>
.chartContainer { width: 100%; height: 400px; }
@media (max-width: 768px) {
.chartContainer { width: 100%; height: 400px; }
}
</style>
<div className="chartContainer">
<ChartWrapper
chartType="グループ化棒グラフ"
dataKey="年齢別人口"
targetPeriod="過去10年"
localGovCode="13116"
axisConfig={{"xKey":"time","yKey":"value","categoryLabel":"category","xLabel":"","yLabel":"","unit":"人"}}
/>
</div>| 変数名 | 内容 | 必須 | 解説 |
|---|---|---|---|
| chartType | グラフ種別 | '棒グラフ'、'折れ線グラフ'、'面グラフ' から選択 | |
| dataKey | データキー | ||
| localGovCode | 自治体コード | ● | 文字列 |
| style | 幅 (PC) 高さ (PC) 幅 (スマホ) 高さ (スマホ) | ● | グラフの大きさ。指定しないとグラフが表示されません。 |
| style | その他のスタイル | CSS変数名【デフォルト値】説明 --chart-color1【#8884d8】系列1の色。棒の塗り色（Barでは1色目を使用） --chart-color2【#82ca9d】系列2の色 --chart-color3【#ffc658】系列3の色 --chart-color4【#ff8042】系列4の色 --chart-color5【#0088fe】系列5の色 --chart-color6【#00c49f】系列6の色 --chart-color7【#333】系列7の色 --chart-color8【#ccc】系列8の色 --chart-color9【#666】系列9の色 --chart-text-color【#333】タイトル・データラベル・Y軸ラベルなどの文字色 --chart-tick-color【#666】X/Y軸目盛り（tick）の文字色 --chart-axis-line-color【#999】X/Y軸ライン色、ツールチップ枠線色 --chart-bar-label-display【】ラベルの値表示（表示しない場合は none） |