cubic83
Goto Top

Chart.js - Skala rechts von der Grafik statt links

Einen wunderschönen Abend,

ich habe ein Problem mit Chart.JS und vielleicht kennt sich ja jemand damit aus und kann mir weiter helfen. Mit google komme ich nicht weiter.

Im Grund würde ich einfach gerne einen Graph haben mit 2 Linien. Das klappt auch soweit. Ich wollte nur gerne eine Y-Achse rechts vom Graph haben.

Das ist mein aktueller Code, den ich mir zusammen gesucht habe. Vielleicht weiss jemand wieso das nicht geht?

Vielen Dank und mit freundlichen Grüßen

canvas id="myChart270423" width="1000" height="400"></canvas>  
<script>

const ctx270423 = document.getElementById('myChart270423').getContext('2d');  
const myChart270423 = new Chart(ctx270423, {
   data : {
      labels: ['00-01', '01-02', '02-03', '03-04', '04-05', '05-06', '06-07', '07-08', '08-09', '09-10', '10-11', '11-12', '12-13', '13-14', '14-15', '15-16', '16-17', '17-18', '18-19', '19-20', '20-21', '21-22', '22-23', '23-24'],  
      datasets: [
         {
            type: 'line',  
            label: 'Temperatur',   
            yAxisID: 'A',  
            data: [3.10, 2.20, 1.50, 1.10, 0.90, 0.70, 0.40, 0.30, 1.40, 4.20, 6.20, 8.50, 10.00, 11.20, 11.80, 12.40, 12.40, 12.20, 12.10, 11.80, 10.70, 9.60, 9.10, 8.40],
            borderColor: 'rgb(75, 192, 192)',  
            fill: false,
            tension: 0.1
         },
         {
            type: 'line',  
            label: 'Luftdruck',   
            yAxisID: 'B',  
            data: [959.10, 959.20, 959.30, 959.00, 959.00, 958.70, 958.70, 958.70, 959.10, 959.50, 959.50, 959.50, 959.30, 959.10, 958.80, 958.40, 957.90, 957.40, 957.10, 956.90, 956.70, 956.70, 956.40, 955.90],
            borderColor: 'rgb(252, 109, 109)',  
            fill: false,
            tension: 0.1
         }
     ], 
     options: {
         responsive: true,
         scales: {
            A: {
                  type: 'linear',   
                  position: 'left',  
                  ticks: { beginAtZero: true, color: 'rgb(75, 192, 192)' },  
                  grid: { display: false }
            },
            B:   {
                  type: 'linear',   
                  position: 'right',  
                  ticks: { beginAtZero: true, color: 'rgb(75, 192, 192)' },  
                  grid: { display: false }
            }
            
         }
     }
             
   }
});
</script>

Content-Key: 6925701404

Url: https://administrator.de/contentid/6925701404

Printed on: July 24, 2024 at 15:07 o'clock

Mitglied: 6247018886
Solution 6247018886 Apr 26, 2023 updated at 16:57:11 (UTC)
Goto Top
Du hast das dataset Object falsch verschachtelt ... Guckst du
https://www.chartjs.org/docs/latest/samples/line/multi-axis.html

const ctx270423 = document.getElementById('myChart270423');  
const myChart270423 = new Chart(ctx270423, {
	type: 'line',  
	data : {
	  labels: ['00-01', '01-02', '02-03', '03-04', '04-05', '05-06', '06-07', '07-08', '08-09', '09-10', '10-11', '11-12', '12-13', '13-14', '14-15', '15-16', '16-17', '17-18', '18-19', '19-20', '20-21', '21-22', '22-23', '23-24'],  
	  datasets: [
		 {
			type: 'line',  
			label: 'Temperatur',   
			yAxisID: 'yA',  
			data: [3.10, 2.20, 1.50, 1.10, 0.90, 0.70, 0.40, 0.30, 1.40, 4.20, 6.20, 8.50, 10.00, 11.20, 11.80, 12.40, 12.40, 12.20, 12.10, 11.80, 10.70, 9.60, 9.10, 8.40],
			borderColor: 'rgb(75, 192, 192)',  
			fill: false,
			tension: 0.1
		 },
		 {
			type: 'line',  
			label: 'Luftdruck',   
			yAxisID: 'yB',  
			data: [959.10, 959.20, 959.30, 959.00, 959.00, 958.70, 958.70, 958.70, 959.10, 959.50, 959.50, 959.50, 959.30, 959.10, 958.80, 958.40, 957.90, 957.40, 957.10, 956.90, 956.70, 956.70, 956.40, 955.90],
			borderColor: 'rgb(252, 109, 109)',  
			fill: false,
			tension: 0.1
		 }
	     ]
	},
	options: {
		responsive: true,
		scales: {
			yA: {
				type: 'linear',   
				position: 'left',  
				display: true,
				ticks: { beginAtZero: true, color: 'rgb(75, 192, 192)' },  
				grid: { display: false }
			},
			yB: {
				type: 'linear',  
				position: 'right',  
				display: true,
				ticks: { beginAtZero: true, color: 'rgb(75, 192, 192)' },  
				grid: { display: false }
			}
		}
	}
});

Cheers briggs
Member: Cubic83
Cubic83 Apr 26, 2023 at 17:09:54 (UTC)
Goto Top
Hallo,

sogar den Code angepasst. Danke für deine Mühe!

Ich habe das gelesen. Was ich dabei nicht verstanden habe: Wenn ich jetzt als drittes noch die Regenmenge zunehme als BAR, dann wäre doch der obere Type mit line nicht mehr richtig? Kann ich dann dort ein Array definieren?

type: ['line', 'bar']  

oder wie sähe es dann aus?
Mitglied: 6247018886
Solution 6247018886 Apr 26, 2023 updated at 20:35:32 (UTC)
Goto Top
Guckst du hier Combo bar/line
Du kannst für jedes Dataset den Chart-Typ mit dem type Parameter festlegen.
Also bspw. generell für den Chart "line" festlegen aber in einem bestimmten Dataset dann den Typ mit type: 'bar' überschreiben, oder umgekehrt.
Member: Cubic83
Cubic83 Apr 27, 2023 at 04:43:40 (UTC)
Goto Top
Ok, prima. Vielen Dank!