Data Visualization
Το πρώτο μου Web Chart
Σε αυτή την ενότητα θα δούμε για πρώτη φορά την απεικόνιση δεδομένων χρησιμοποιώντας Web Charts. Στο παράδειγμα χρησιμοποιούμε τα amCharts, αλλά προτείνουμε να διερευνήσετε και τις άλλες διαθέσιμες βιβλιοθήκες που προέρχονται από άλλους παρόχους (π.χ. google charts, apex charts, κλπ). Δείτε το βίντεο και τις διαφάνειες και προχωρήστε στην πρώτη σας δοκιμή.
Εισαγωγικό βίντεο
Δείτε το 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); |