j-LineChart
Παρακαλούμε αναθεωρήστε ένα παράδειγμα και κρατήστε μια πηγή δεδομένων.
ΕΠΙΤΡΟΦΗ:
offsetX {Number}Ένα offset X για το εργαλείο τύπου αξίας (προεπιλογή:10)offsetY {Number}Ένα offset Y για το εργαλείο τύπου αξίας (προεπιλεγμένο:10)templateX {String}Tangular πρότυπο για το ακτίνο X (προεπιλεγμένο:{{ value }})templateY {String}Tangular πρότυπο για το άξονα Y (προεπιλεγμένο:{{ value | format(0) }})selected {String}Tangular πρότυπο για επιλεγμένες τιμές (προεπιλογή:{{ value | format(0) }})- Το ύψος
height {Number/String}(προεπιλεγμένο:0= αυτο-υψηλότητα) ή τοstringνοείται ως γονικό στοιχείο - Το πλάτος
width {Number/String}(προεπιλεγμένο:0= αυτόματη πλάτος) ή τοstringνοείται ως γονικό στοιχείο limit {Number}Το μέγιστο όριο αξίας για το άξονα Y (προεπιλεγμένο:0)- Το
fill {Boolean}επιτρέπει τη συμπλήρωση (προεπιλεγμένο:false) - Φυσικότητα συμπλήρωσης
fillopacity {Number}(προεπιλεγμένη:0.1) point {Number}Το μέγεθος τηςpoint(Συμφωνία με την προεπιλογή :5)pl {Number}γραμμές αφετηρία παδίνωση (προεπιλεγμένη:10)pr {Number}γραμμές δεξιά πατίνωση (προεπιλεγμένη:10)pt {Number}γραμμές κορυφαία πατίνωση (προεπιλεγμένη:10)pb {Number}γραμμές κάτω πατίνωση (προεπιλεγμένη:25)- Ο τύπος γραμμών
type {String}μπορεί να είναιnormal,curvesήstep(προεπιλεγμένο:normal) prselected {Number}δεξιά πατίνωση για επιλεγμένη τιμή (προεπιλογή:0)- Η μέση τιμή
avg {Number}(το διάγραμμα κάνει μια νέα μαύρη γραμμή) - Το
xmod {Number}εκτελεί τοmoduloγια τα σημεία στο x-axis (προεπιλεγμένο:0) yaxis {nubmer}: Αριθμός σημείων y-αξίου (προεπιλογή:4)exec {String}ένα μονοπάτι για να λειτουργήσει και εκτελείται μετά από κάποιο σημείοmarginW {Number}μάρκα για τοwidthmarginH {Number}μάρκα για τοheight
Καλό να ξέρεις:
Το The templateX, templateY και selected Οι επιλογές μπορεί να οριστεί χωρίς τη χρήση του {{ και }} Το συστατικό το ανακαλύπτει αυτόματα.
Χρησιμοποιήστε το με <ui-component name="linechart">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.
<div class="container">
<div class="row">
<div class="col-sm-6">
<ui-component name="linechart" path="values"></ui-component>
<br />
</div>
<div class="col-sm-6">
<ui-component name="linechart" path="values" config="fill:true"></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>