英文:
Flutter d_chart : How to combine two or more duplicated domains as one in the chart?
问题
有人之前了解过图表吗，我正在使用d_chart.dart？
如果有重复的域名，我如何将它们添加并合并为一个？
我的预期输出是从2021年：4和2021年：6中的2021年：10
```dart
DChartBar(
data: [
{
'id': 'Bar',
'data': [
{'domain': '2020', 'measure': 3},
{'domain': '2021', 'measure': 4},
{'domain': '2021', 'measure': 6},
{'domain': '2023', 'measure': 0.3},
],
},
],
domainLabelPaddingToAxisLine: 16,
axisLineTick: 2,
axisLinePointTick: 2,
axisLinePointWidth: 10,
axisLineColor: Colors.green,
measureLabelPaddingToAxisLine: 16,
barColor: (barData, index, id) => Colors.green,
showBarValue: true,
),
英文:
Has anyone known of chart before, I'm using d_chart.dart?
If there are duplicated domains, how do I add and combine them as one?
My expected output is 2021: 10 from 2021: 4 and 2021: 6
DChartBar(
data: [
{
'id': 'Bar',
'data': [
{'domain': '2020', 'measure': 3},
{'domain': '2021', 'measure': 4},
{'domain': '2021', 'measure': 6},
{'domain': '2023', 'measure': 0.3},
],
},
],
domainLabelPaddingToAxisLine: 16,
axisLineTick: 2,
axisLinePointTick: 2,
axisLinePointWidth: 10,
axisLineColor: Colors.green,
measureLabelPaddingToAxisLine: 16,
barColor: (barData, index, id) => Colors.green,
showBarValue: true,
),
答案1
得分: 1
你需要预处理你的数据。
List<Map<String, dynamic>> data = [
{
'id': 'Bar',
'data': [
{'domain': '2020', 'measure': 3},
{'domain': '2021', 'measure': 4},
{'domain': '2021', 'measure': 6},
{'domain': '2023', 'measure': 0.3},
],
},
];
// 合并重复的域。
data.forEach((element) {
element['data'].forEach((bar) {
if (element['data'].where((b) => b['domain'] == bar['domain']).length > 1) {
bar['measure'] += element['data'].where((b) => b['domain'] == bar['domain']).map((b) => b['measure']).reduce((a, b) => a + b);
}
});
});
然后稍后使用这些数据：
DChartBar(
data: data,
domainLabelPaddingToAxisLine: 16,
axisLineTick: 2,
axisLinePointTick: 2,
axisLinePointWidth: 10,
axisLineColor: Colors.green,
measureLabelPaddingToAxisLine: 16,
barColor: (barData, index, id) => Colors.green,
showBarValue: true,
);
英文:
You need to preprocess your data.
List<Map<String, dynamic>> data = [
{
'id': 'Bar',
'data': [
{'domain': '2020', 'measure': 3},
{'domain': '2021', 'measure': 4},
{'domain': '2021', 'measure': 6},
{'domain': '2023', 'measure': 0.3},
],
},
];
// Combine duplicate domains.
data.forEach((element) {
element['data'].forEach((bar) {
if (element['data'].where((b) => b['domain'] == bar['domain']).length > 1) {
bar['measure'] += element['data'].where((b) => b['domain'] == bar['domain']).map((b) => b['measure']).reduce((a, b) => a + b);
}
});
});
And later use the data
DChartBar(
data: data,
domainLabelPaddingToAxisLine: 16,
axisLineTick: 2,
axisLinePointTick: 2,
axisLinePointWidth: 10,
axisLineColor: Colors.green,
measureLabelPaddingToAxisLine: 16,
barColor: (barData, index, id) => Colors.green,
showBarValue: true,
);
答案2
得分: 1
你可以将数据分离到新的变量中，然后进行编辑。你可以在dartpad.dev中查看这段代码。
Console output:
在此处查看图像描述
最后设置到图表小部件：
DChartBar(
data: realData,
domainLabelPaddingToAxisLine: 16,
axisLineTick: 2,
axisLinePointTick: 2,
axisLinePointWidth: 10,
axisLineColor: Colors.green,
measureLabelPaddingToAxisLine: 16,
barColor: (barData, index, id) => Colors.green,
showBarValue: true,
),
英文:
you can separate data to new variable, then edit it. you can check this code in dartpad.dev
List realData = [
{
'id': 'Bar',
'data': [
{'domain': '2020', 'measure': 3},
{'domain': '2021', 'measure': 4},
{'domain': '2021', 'measure': 6},
{'domain': '2023', 'measure': 0.3},
],
},
];
// cek console
print('--------------');
realData[0]['data'].forEach((e){
print(e['domain'] + ' : '+e['measure'].toString());
});
// start proses...
List newData = [];
for (var item in realData[0]['data']){
int existIndex = newData.indexWhere((e) => e['domain'] == item['domain']);
if(existIndex == -1) {
// not found / new domain
newData.add(item);
}else{
// update measure
newData[existIndex]['measure'] += item['measure'];
}
}
realData[0]['data'] = newData;
// end proses...
// cek console
print('--------------');
realData[0]['data'].forEach((e){
print(e['domain'] + ' : '+e['measure'].toString());
});
Console output:
enter image description here
and finally set to widget chart:
DChartBar(
data: realData,
domainLabelPaddingToAxisLine: 16,
axisLineTick: 2,
axisLinePointTick: 2,
axisLinePointWidth: 10,
axisLineColor: Colors.green,
measureLabelPaddingToAxisLine: 16,
barColor: (barData, index, id) => Colors.green,
showBarValue: true,
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论