chart.js - Typ "Line" in "Bar" ändern - Balken werden nur halb dargestellt

[ebody]

Hallo,

ich möchte über einen Button den Diagramm Typ ändern. Der Typ zu Beginn ist "Line". Klicke ich auf Bar, werden die Balken links und rechts nur zur Hälfte (der Breite) angezeigt.

Hier gibt es eine Lösung und der entscheidende Unterschied (zu meinem Script), damit die Balken vollständig angezeigt werden, scheint myChart.destroy(); zu sein.

Ich ändere den Diagramm Typ mit diesem Script:

// Code Verkürzt dargestellt, um das nur Nötigste zu zeigen
var ctx = $('#myChart');
var myChart= new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

// Line 
$('#line_chart').click(function(){
    myChart.config.type = 'line';
    myChart.update();
});

// Bar
$('#bar_chart').click(function(){
    myChart.config.type = 'bar';
    myChart.update();
});

Gibt es evtl. eine andere Lösung, wo man nur eine Angabe in data oder options machen muss, damit die Balken vollständig dargestellt werden?

Gruß ebody

[klawischnigg]

Hi there,

ich möchte über einen Button den Diagramm Typ ändern. Der Typ zu Beginn ist "Line". Klicke ich auf Bar, werden die Balken links und rechts nur zur Hälfte (der Breite) angezeigt.

Hier gibt es eine Lösung und der entscheidende Unterschied (zu meinem Script), damit die Balken vollständig angezeigt werden, scheint myChart.destroy(); zu sein.

Und warum baust Du myChart.destroy(); nicht einfach ein?

Gibt es evtl. eine andere Lösung, wo man nur eine Angabe in data oder options machen muss, damit die Balken vollständig dargestellt werden?

Also ich kenne chart.js nicht, ich verwende wenn ich solche Anforderungen habe immer chartist.js, damit sollte das Darstellen wie Du es gerne hättest kein Problem sein. Ob man damit allerding so mirnix dirnix den Diagramm-Typ ohne Deppenleerzeichen wechseln kann weiß ich nicht, das hab ich noch nicht benötigt und daher auch nicht probiert. Ohne Programmieren wird's nicht gehen, aber wie gesagt, mir ist nicht ganz klar, warum das offensichtliche object.destroy() nicht einfach in die Funktion einbaust, die vom Button getriggert wird...

[ebody]

mir ist nicht ganz klar, warum das offensichtliche object.destroy() nicht einfach in die Funktion einbaust

Ich wollte einfach gerne wissen, ob es eine einfachere/andere Möglichkeit gibt. Hätte ja sein können.

Wenn man über ein Formular Daten eingibt und diese über Knopfdruck ins Chart (Objekt) einbaut und dann den Diagrammtyp wechselt, wäre das durch myChart.destroy(); schon deutlich aufwendiger. Denn ich müsste es per Script neu "aufbauen", die Daten aus dem Formular merken, um diese wieder einbauen zu können u.a.

Aber so wie es aussieht lässt es sich nur mit myChart.destroy(); umsetzen.

Gruß ebody