Data Visualization


Παραδείγματα διαδικτυακού προγραμματισμού για visualization μετρήσεων

Σε πολλές σύγχρονες εφαρμογές, υπάρχει η ανάγκη για απεικόνιση μεταβαλλόμενων μετρήσεων και άλλων δεδομένων σε πραγματικό χρόνο. Επειδή η απεικόνιση γίνεται στο διαδίκτυο, θα πρέπει να μελετήσουμε τις αντίστοιχες εμπλεκόμενες τεχνολογίες. Στο front-end πρέπει να υπάρχει το κατάλληλο visualization, το οποίο να καλύπτει τις αντίστοιχες ανάγκες. Η οπτικοποίηση των μετρήσεων μπορεί να γίνει με πολλούς τρόπους (κοντέρ, διαγράμματα, κλπ). Με τον κατάλληλο κώδικα Javascript και την αξιοποίηση αντίστοιχων διαδικτυακών βιβλιοθηκών, είναι δυνατή η ανάπτυξη και προσαρμογή του επιθυμητού visualization. Σε αυτή την ενότητα, παρουσιάζεται μια σχετική προσέγγιση (βίντεο και διαφάνειες), καθώς και παραδείγματα με κώδικα για να ξεκινήσετε.

 

Εισαγωγικό βίντεο



 

Παραδείγματα με τροποποιήσεις στον κώδικα

(με κόκκινο χρώμα η τροποποίηση)


Παράδειγμα 1: Η πρώτη απεικόνιση

Παράδειγμα 1: Κώδικας

//Καθορισμός θέματος
am4core.useTheme(am4themes_animated);

//δημιουργία chart
//από το αντίστοιχο αντικείμενο
var chart = am4core.create("konter", am4charts.GaugeChart);

//Δημιουργία αντικειμένου άξονα
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

//Ρυθμίσεις άξονα
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;

//Εσωτερική ακτίνα
chart.innerRadius = -20;

//Χρωματισμός και ρυθμίσεις της κλίμακας 0 έως 100
var range = axis.axisRanges.create();
range.value = 0;
range.endValue = 100;
range.axisFill.fillOpacity = 1;
range.axisFill.fill = am4core.color("#00aa00");
range.axisFill.zIndex = - 1;

//Ρυθμίσεις δείκτη και απεικόνιση τιμής
var hand = chart.hands.push(new am4charts.ClockHand());
hand.value = 22;
hand.pin.disabled = false;
hand.fill = am4core.color("#7D7C84");
hand.stroke = am4core.color("#7D7C84");
hand.innerRadius = am4core.percent(0);
hand.radius = am4core.percent(120);
hand.startWidth = 5;
hand.showValue(60);

Παράδειγμα 2: Καθορισμός Βέλους (χρώμα, πάχος)

Παράδειγμα 2: Κώδικας

//Καθορισμός θέματος
am4core.useTheme(am4themes_animated);

//δημιουργία chart
//από το αντίστοιχο αντικείμενο
var chart = am4core.create("konter", am4charts.GaugeChart);

//Δημιουργία αντικειμένου άξονα
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

//Ρυθμίσεις άξονα
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;

//Εσωτερική ακτίνα
chart.innerRadius = -20;

//Χρωματισμός και ρυθμίσεις της κλίμακας 0 έως 100
var range = axis.axisRanges.create();
range.value = 0;
range.endValue = 100;
range.axisFill.fillOpacity = 1;
range.axisFill.fill = am4core.color("#00aa00");
range.axisFill.zIndex = - 1;

//Ρυθμίσεις δείκτη και απεικόνιση τιμής
var hand = chart.hands.push(new am4charts.ClockHand());
hand.value = 22;
hand.pin.disabled = false;
hand.fill = am4core.color("#FFFF00");
hand.stroke = am4core.color("#AA0000");

hand.innerRadius = am4core.percent(0);
hand.radius = am4core.percent(120);
hand.startWidth = 20;
hand.showValue(60);

Παραδειγμα 3: Χρώμα κλίμακας

Παραδειγμα 3: Κώδικας

//Καθορισμός θέματος
am4core.useTheme(am4themes_animated);

//δημιουργία chart
//από το αντίστοιχο αντικείμενο
var chart = am4core.create("konter", am4charts.GaugeChart);

//Δημιουργία αντικειμένου άξονα
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

//Ρυθμίσεις άξονα
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;

//Εσωτερική ακτίνα
chart.innerRadius = -20;

//Χρωματισμός και ρυθμίσεις της κλίμακας 0 έως 100
var range = axis.axisRanges.create();
range.value = 0;
range.endValue = 100;
range.axisFill.fillOpacity = 1;
range.axisFill.fill = am4core.color("#AA0000");
range.axisFill.zIndex = - 1;

//Ρυθμίσεις δείκτη και απεικόνιση τιμής
var hand = chart.hands.push(new am4charts.ClockHand());
hand.value = 22;
hand.pin.disabled = false;
hand.fill = am4core.color("#7D7C84");
hand.stroke = am4core.color("#7D7C84");
hand.innerRadius = am4core.percent(0);
hand.radius = am4core.percent(120);
hand.startWidth = 20;
hand.showValue(60);

Παράδειγμα 4: Χρωματική κλίμακα

Παράδειγμα 4: Κώδικας

//Καθορισμός θέματος
am4core.useTheme(am4themes_animated);

//δημιουργία chart
//από το αντίστοιχο αντικείμενο
var chart = am4core.create("konter", am4charts.GaugeChart);

//Δημιουργία αντικειμένου άξονα
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

//Ρυθμίσεις άξονα
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;

//Εσωτερική ακτίνα
chart.innerRadius = -20;

//Χρωματισμός και ρυθμίσεις της κλίμακας 0 έως 50
var range = axis.axisRanges.create();
range.value = 0;
range.endValue = 50;
range.axisFill.fillOpacity = 1;
range.axisFill.fill = am4core.color("#00AA00");
range.axisFill.zIndex = - 1;

//Χρωματισμός και ρυθμίσεις της κλίμακας 50 έως 80
var range2 = axis.axisRanges.create();
range2.value = 50;
range2.endValue = 80;
range2.axisFill.fillOpacity = 1;
range2.axisFill.fill = am4core.color("#FFA500");
range2.axisFill.zIndex = - 1;

//Χρωματισμός και ρυθμίσεις της κλίμακας 80 έως 100
var range3 = axis.axisRanges.create();
range3.value = 80;
range3.endValue = 100;
range3.axisFill.fillOpacity = 1;
range3.axisFill.fill = am4core.color("#AA0000");
range3.axisFill.zIndex = - 1;

//Ρυθμίσεις δείκτη και απεικόνιση τιμής
var hand = chart.hands.push(new am4charts.ClockHand());
hand.value = 22;
hand.pin.disabled = false;
hand.fill = am4core.color("#7D7C84");
hand.stroke = am4core.color("#7D7C84");
hand.innerRadius = am4core.percent(0);
hand.radius = am4core.percent(120);
hand.startWidth = 5;
hand.showValue(60);

Παράδειγμα 5: Κεντρική ετικέτα

Παράδειγμα 5: Κώδικας

//Καθορισμός θέματος
am4core.useTheme(am4themes_animated);

//δημιουργία chart
//από το αντίστοιχο αντικείμενο
var chart = am4core.create("konter", am4charts.GaugeChart);

//Δημιουργία αντικειμένου άξονα
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

//Ρυθμίσεις άξονα
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;

//Εσωτερική ακτίνα
chart.innerRadius = -20;

//Χρωματισμός και ρυθμίσεις της κλίμακας 0 έως 50
var range = axis.axisRanges.create();
range.value = 0;
range.endValue = 50;
range.axisFill.fillOpacity = 1;
range.axisFill.fill = am4core.color("#00AA00");
range.axisFill.zIndex = - 1;

//Χρωματισμός και ρυθμίσεις της κλίμακας 50 έως 80
var range2 = axis.axisRanges.create();
range2.value = 50;
range2.endValue = 80;
range2.axisFill.fillOpacity = 1;
range2.axisFill.fill = am4core.color("#FFA500");
range2.axisFill.zIndex = - 1;

//Χρωματισμός και ρυθμίσεις της κλίμακας 80 έως 100
var range3 = axis.axisRanges.create();
range3.value = 80;
range3.endValue = 100;
range3.axisFill.fillOpacity = 1;
range3.axisFill.fill = am4core.color("#AA0000");
range3.axisFill.zIndex = - 1;

//Κεντρική ετικέτα
var label = chart.radarContainer.createChild(am4core.Label);
label.isMeasured = false;
label.fontSize = 25;
label.x = am4core.percent(50);
label.y = am4core.percent(100);
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
label.text = "Υγρασία";

//Ρυθμίσεις δείκτη και απεικόνιση τιμής
var hand = chart.hands.push(new am4charts.ClockHand());
hand.value = 22;
hand.pin.disabled = false;
hand.fill = am4core.color("#7D7C84");
hand.stroke = am4core.color("#7D7C84");
hand.innerRadius = am4core.percent(0);
hand.radius = am4core.percent(120);
hand.startWidth = 5;
hand.showValue(60);

Παράδειγμα 6: Τυχαία κίνηση δείκτη

Παράδειγμα 6: Κώδικας

//Καθορισμός θέματος
am4core.useTheme(am4themes_animated);

//δημιουργία chart
//από το αντίστοιχο αντικείμενο
var chart = am4core.create("konter", am4charts.GaugeChart);

//Δημιουργία αντικειμένου άξονα
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

//Ρυθμίσεις άξονα
var axis = chart.xAxes.push(new am4charts.ValueAxis());
axis.min = 0;
axis.max = 100;
axis.strictMinMax = true;

//Εσωτερική ακτίνα
chart.innerRadius = -20;

//Χρωματισμός και ρυθμίσεις της κλίμακας 0 έως 50
var range = axis.axisRanges.create();
range.value = 0;
range.endValue = 50;
range.axisFill.fillOpacity = 1;
range.axisFill.fill = am4core.color("#00AA00");
range.axisFill.zIndex = - 1;

//Χρωματισμός και ρυθμίσεις της κλίμακας 50 έως 80
var range2 = axis.axisRanges.create();
range2.value = 50;
range2.endValue = 80;
range2.axisFill.fillOpacity = 1;
range2.axisFill.fill = am4core.color("#FFA500");
range2.axisFill.zIndex = - 1;

//Χρωματισμός και ρυθμίσεις της κλίμακας 80 έως 100
var range3 = axis.axisRanges.create();
range3.value = 80;
range3.endValue = 100;
range3.axisFill.fillOpacity = 1;
range3.axisFill.fill = am4core.color("#AA0000");
range3.axisFill.zIndex = - 1;

//Κεντρική ετικέτα
var label = chart.radarContainer.createChild(am4core.Label);
label.isMeasured = false;
label.fontSize = 25;
label.x = am4core.percent(50);
label.y = am4core.percent(100);
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
label.text = "Υγρασία";

//Ρυθμίσεις δείκτη και απεικόνιση τιμής
var hand = chart.hands.push(new am4charts.ClockHand());
hand.value = 22;
hand.pin.disabled = false;
hand.fill = am4core.color("#7D7C84");
hand.stroke = am4core.color("#7D7C84");
hand.innerRadius = am4core.percent(0);
hand.radius = am4core.percent(120);
hand.startWidth = 5;
hand.showValue(60);

//Τυχαία κίνηση δείκτη
setInterval(function() {
hand.showValue(Math.random() * 100, 1000, am4core.ease.cubicOut);
}, 500);