Data Visualization

---

Παράδειγμα 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);

---

Παράδειγμα 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);