Data Visualization





Το πρώτο μου Web Chart

Σε αυτή την ενότητα θα δούμε για πρώτη φορά την απεικόνιση δεδομένων χρησιμοποιώντας Web Charts. Στο παράδειγμα χρησιμοποιούμε τα amCharts, αλλά προτείνουμε να διερευνήσετε και τις άλλες διαθέσιμες βιβλιοθήκες που προέρχονται από άλλους παρόχους (π.χ. google charts, apex charts, κλπ). Δείτε το βίντεο και τις διαφάνειες και προχωρήστε στην πρώτη σας δοκιμή.

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

Δείτε το Live!

Go Live!

Η παρουσίαση σε εικόνες



















Ο κώδικας


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>microdev.gr</title>
</head>
<body>
 <center>
    <h1>Δοκιμή amCharts από το microdev.gr</h1><br><br>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="konter"></div>
<script>
//Καθορισμός θέματος
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 hand2 = chart.hands.push(new am4charts.ClockHand());
hand2.value = 22;
hand2.pin.disabled = false;
hand2.fill = am4core.color("#7D7C84");
hand2.stroke = am4core.color("#7D7C84");
hand2.innerRadius = am4core.percent(0);
hand2.radius = am4core.percent(120);
hand2.startWidth = 5;
hand2.showValue(60);

</script>
</body>
</html>

Ένα παράδειγμα ακόμα

Chart2 Live

Περισσότερες πληροφορίες

Chart programming

Βασικές τροποποιήσεις στον κώδικα


Αρχικός κώδικας

//Καθορισμός θέματος
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);

Βέλος (χρώμα, πάχος)

//Καθορισμός θέματος
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);

Χρώμα κλίμακας

//Καθορισμός θέματος
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);

Χρωματική κλίμακα

//Καθορισμός θέματος
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);

Κεντρική ετικέτα

//Καθορισμός θέματος
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);

Τυχαία κίνηση δείκτη

//Καθορισμός θέματος
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);