Closed11
(Flutter Web) fl_chart で複合グラフをつくりたい
fl_chart で複合グラフをつくりたい
こういうやつ
issue に上がってた
stack で重ねればいけるかも?
request issue も上がっていた
とりあえず BarChart
class _BarChart extends StatelessWidget {
const _BarChart();
Widget build(BuildContext context) {
final List<BarChartGroupData> sample = List.generate(
7,
(int i) {
int x = i + 1;
double toY = i * 10;
return BarChartGroupData(
barsSpace: 4,
x: x,
barRods: [
BarChartRodData(
toY: 160 + toY,
color: Colors.red,
width: 16,
),
BarChartRodData(
toY: 140 + toY,
color: Colors.indigo,
width: 16,
),
BarChartRodData(
toY: 120 + toY,
color: Colors.green,
width: 16,
),
BarChartRodData(
toY: 100 + toY,
color: Colors.amber,
width: 16,
),
]
);
}
);
return BarChart(
BarChartData(
maxY: 300,
barTouchData: BarTouchData(
enabled: false,
),
titlesData: const FlTitlesData(
show: false
),
borderData: FlBorderData(
show: false
),
gridData: const FlGridData(
show: false
),
barGroups: sample
)
);
}
}
LineChart
class _LineChart extends StatelessWidget {
const _LineChart();
Widget build(BuildContext context) {
final List<FlSpot> spots = [
FlSpot(1, 100),
FlSpot(2, 150),
FlSpot(3, 200),
FlSpot(4, 150),
FlSpot(5, 200),
FlSpot(6, 150),
FlSpot(7, 100),
];
final List<LineChartBarData> sample = [
LineChartBarData(
color: Colors.purple,
dotData: const FlDotData(
show: false
),
spots: spots,
)
];
return LineChart(
LineChartData(
maxY: 300,
lineTouchData: const LineTouchData(
enabled: false,
),
titlesData: const FlTitlesData(
show: false
),
borderData: FlBorderData(
show: false
),
gridData: const FlGridData(
show: false
),
lineBarsData: sample
)
);
}
}
- デバイスの Width に合わせて BarChart どうしの margin がかわる
- LineChart は x でこてい
このスクラップは2023/12/13にクローズされました