j-BarChart
Παρακαλούμε αναθεωρήστε ένα παράδειγμα και κρατήστε μια πηγή δεδομένων.
ΕΠΙΤΡΟΦΗ:
paddingbars {Number}πατίνωση μεταξύ των γραμμών (προεπιλεγμένη:5)paddinggroup {Number}πατίνωση μεταξύ ομάδων φράσεων (προεπιλεγμένη:10)- Το
radius {Number}επιτρέπει τη λειτουργία παρουσίασης (προεπιλεγμένο:2) offsetX {Number}Ένα offset X για το εργαλείο τύπου αξίας (προεπιλογή:10)offsetY {Number}Ένα offset Y για το εργαλείο τύπου αξίας (προεπιλεγμένο:10)templateX {String}Tangular πρότυπο για το ακτίνο X (προεπιλεγμένο:{{ value }})templateY {String}Tangular πρότυπο για το άξονα Y (προεπιλεγμένο:{{ value | format(0) }})- Το ύψος
height {Number/String}(προεπιλεγμένο:0= αυτο-υψηλότητα) ή τοstringνοείται ως γονικό στοιχείο - Το πλάτος
width {Number/String}(προεπιλεγμένο:0= αυτόματη πλάτος) ή τοstringνοείται ως γονικό στοιχείο limit {Number}Το μέγιστο όριο αξίας για το άξονα Y (προεπιλεγμένο:0)pl {Number}αριστερή πατίνωση για άξονα (προεπιλεγμένη:0)pr {Number}γραμμές δεξιά πατίνωση (προεπιλεγμένη:10)pt {Number}γραμμές κορυφαία πατίνωση (προεπιλεγμένη:10)pb {Number}γραμμές κάτω πατίνωση (προεπιλεγμένη:25)prselected {Number}δεξιά πατίνωση για επιλεγμένη τιμή (προεπιλογή:0)marginW {Number}μάρκα για τοwidthmarginH {Number}μάρκα για τοheight
Χρησιμοποιήστε το με <ui-component name="barchart">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.
<div class="container">
<div class="row">
<div class="col-sm-6">
<ui-component name="barchart" path="values"></ui-component>
</div>
</div>
</div>
<script>
var values = [];
values.push({
name: 'Apples',
values: [{ x: 2009, y: 100 }, { x: 2010, y: 120 }, { x: 2011, y: 130 }, { x: 2012, y: 150 }, { x: 2013, y: 50 }, { x: 2014, y: 200 }, { x: 2015, y: 80 }, { x: 2016, y: 170 }, { x: 2017, y: 300 }]
});
values.push({
name: 'Oranges',
values: [{ x: 2009, y: 40 }, { x: 2010, y: 80 }, { x: 2011, y: 400 }, { x: 2012, y: 170 }, { x: 2013, y: 90 }, { x: 2014, y: 60 }, { x: 2015, y: 160 }, { x: 2016, y: 120 }, { x: 2017, y: 180 }]
});
values.push({
name: 'Bananas',
values: [{ x: 2009, y: 80 }, { x: 2010, y: 40 }, { x: 2011, y: 300 }, { x: 2012, y: 200 }, { x: 2013, y: 120 }, { x: 2014, y: 150 }, { x: 2015, y: 220 }, { x: 2016, y: 40 }, { x: 2017, y: 80 }]
});
</script>