1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 300px;
}
</style>
<script>
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Set up data source
chart.dataSource.url = "https://cefrem.univ-perp.fr/qgis2web/amchart/qst/data.txt";
chart.dataSource.parser = new am4core.CSVParser();
// délimiteur improbable pour récupération des lignes
chart.dataSource.parser.options.delimiter = "~";
chart.dataSource.parser.options.useColumnNames = false;
// récupération et traitement des lignes au chargement
chart.dataSource.events.on("done", function(ev) {
console.log("Datas chargées");
// pointe sur les données
const data = ev.target.data;
// séparateurs comma ou tabulation
const regex = /[,\t]/;
let tab;
data.forEach(function(elem) {
// récup. des datas
tab = elem.col0.split(regex);
// mise à jour de l'objet
tab.forEach(function(t, ind) {
elem["col" + ind] = t;
});
});
// mise à jour de l'objet
var data = ev.target.data;
for (var i = 0; i < data.length; i++) {
// ajout d'une colonne "col4"
data[i]["col5"] = (data[i]["col2"] + data[i]["col4"]) / 2;
}
});
// Ajout d'une colonne
chart.dataSource.events.on("parseended", function (ev) {
console.log("Datas chargées");
// pointe sur les données
const data = ev.target.data;
// séparateurs comma ou tabulation
const regex = /[,\t]/;
let tab;
data.forEach(function(elem) {
// récup. des datas
tab = elem.col0.split(regex);
// mise à jour de l'objet
tab.forEach(function(t, ind) {
elem["col" + ind] = t;
});
});
// mise à jour de l'objet
var data = ev.target.data;
for (var i = 0; i < data.length; i++) {
// ajout d'une colonne "col4"
data[i]["col5"] = (data[i]["col2"] + data[i]["col4"]) / 2;
}
});
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "col1";
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "col2";
series1.dataFields.categoryX = "col1";
series1.name = "P";
series1.strokeWidth = 1;
series1.tensionX = 0.7;
series1.bullets.push(new am4charts.CircleBullet());
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "col3";
series2.dataFields.categoryX = "col1";
series2.name = "T";
series2.strokeWidth = 1;
series2.tensionX = 0.7;
series2.bullets.push(new am4charts.CircleBullet());
var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "col4";
series3.dataFields.categoryX = "col1";
series3.name = "V";
series3.strokeWidth = 1;
series3.tensionX = 0.7;
series3.bullets.push(new am4charts.CircleBullet());
var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "col5";
series3.dataFields.categoryX = "col1";
series3.name = "S";
series3.strokeWidth = 1;
series3.tensionX = 0.7;
series3.bullets.push(new am4charts.CircleBullet());
// Add legend
chart.legend = new am4charts.Legend();
// Enable export
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.align = "right";
chart.exporting.menu.verticalAlign = "top";
chart.exporting.menu.items = [
{
"label": "...",
"menu": [
{ "type": "png", "label": "PNG","options": { "quality": 1 } },
{ "type": "csv", "label": "CSV" },
{ "label": "Print", "type": "print" }
]
}
];
chart.exporting.filePrefix = "Conductivité_Flux";
chart.scrollbarX.exportable = false;
series.tooltip.exportable = false;
</script> |
[amCharts] Ajouter une colonne et calculer un nouveau paramètre dans le tableau importé
Répondre avec citation
Partager