Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
Beide Seiten, vorherige Überarbeitung Vorherige Überarbeitung Nächste Überarbeitung | Vorherige Überarbeitung | ||
playground:playground [2019/03/31 18:48] marcel.pietschmann |
playground:playground [2019/04/04 18:38] (aktuell) marcel.pietschmann |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== Spielplatz ====== | ====== Spielplatz ====== | ||
- | <chartjs width=200>fdgfdg</chartjs> | + | <chartjs> |
+ | var ctx = document.getElementById('myChart'); | ||
+ | var myChart = new Chart(ctx, { | ||
+ | type: 'line', | ||
+ | data: { | ||
+ | labels: [2013,2014,2015,2016,2017,2018,2019], | ||
+ | datasets: [{ | ||
+ | label: "Preis-Quote", | ||
+ | fill: false, | ||
+ | borderColor: "#3e95cd", | ||
+ | showLine: true, | ||
+ | yAxisID: 'B', | ||
+ | data: [0.41, 0.45, 0.42, 0.35, 0.24, 0.22, 0.32] | ||
+ | }, { | ||
+ | label: "Teilnehmeranzahl", | ||
+ | fill: false, | ||
+ | borderColor: "#f4d442", | ||
+ | showLine: true, | ||
+ | yAxisID: 'A', | ||
+ | data: [346,416,401,409,460,469,474] | ||
+ | }, { | ||
+ | label: "1. Preis", | ||
+ | fill: false, | ||
+ | borderColor: "#345fe2", | ||
+ | showLine: true, | ||
+ | yAxisID: 'A', | ||
+ | data: [,,,,,,46] | ||
+ | }, { | ||
+ | label: "2. Preis", | ||
+ | fill: false, | ||
+ | borderColor: "#a834e2", | ||
+ | showLine: true, | ||
+ | yAxisID: 'A', | ||
+ | data: [,,,,,,48] | ||
+ | }, { | ||
+ | label: "3. Preis", | ||
+ | fill: false, | ||
+ | borderColor: "#e23479", | ||
+ | showLine: true, | ||
+ | yAxisID: 'A', | ||
+ | data: [,,,,,,56] | ||
+ | }] | ||
+ | }, | ||
+ | options: { | ||
+ | responsive: true, | ||
+ | scales: { | ||
+ | xAxes: [{ | ||
+ | position: 'bottom', | ||
+ | gridLines: { | ||
+ | zeroLineColor: "rgba(0,255,0,1)" | ||
+ | }, | ||
+ | scaleLabel: { | ||
+ | display: true, | ||
+ | labelString: 'Jahr' | ||
+ | } | ||
+ | }], | ||
+ | yAxes: [{ | ||
+ | id: 'A', | ||
+ | type: 'linear', | ||
+ | position: 'left', | ||
+ | }, { | ||
+ | id: 'B', | ||
+ | type: 'linear', | ||
+ | position: 'right', | ||
+ | gridLines: false, | ||
+ | ticks: { | ||
+ | max: 1, | ||
+ | min: 0 | ||
+ | } | ||
+ | }] | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | </chartjs> | ||