CanvasJS Diagramm anpassen

  • Hallo Leute,

    ich möchte z.B. ausgehend von diesem Beispiel mein Liniendiagramm nach den Vorstellungen meiner Skizze (siehe Anlage) anpassen.

    Konkret möchte ich ausgehend von meiner Skizze bei einem bestimmten x-Wert (z.B. 1) die brauen Punktwerte bei bestimmten y-Werten (1,2,3) auf dem Dagramm darstellen, wobei aber die Punktwerte wie ersichtlich ganz andere Zahlendimensionen haben .

    Die orange Linie ist bestimmte Linie, welche angezeigt werden soll (das klappt bereits!).

    Hat jemand von euch eine Ahnung ob und wie ich das umsetzen kann?

    Bedanke mich schon im Voraus für eure Hilfe!

    Liebe Grüße

  • Sempervivum :

    Vielen Dank für dein Interesse mir zu helfen.

    Ich habe ein bestehendes Liniendiagramm (zB. dies), entspricht meiner Skizze als Beispiel der orangen Linie, und ich möchte in diesem Diagramm die braunen Punktwerte anzeigen.

    Ich hoffe die Aufgabenstellung ist klar ansonsten bitte einfach nachfragen.

    Bedanke mich schon im Voraus für eurer Unterstützung bei der Umsetzung.

  • Mal sehen, was ich davon bisher verstehe:

    Die gelbe, gerade, horizontale Linie in dem Bild in deinem ersten Postion ist in Wirklichkeit ein Linegraph wie man ihn normaler Weise kennt und wie man ihn bei chart.js sieht.

    Diesem Diagramm möchtest Du jetzt die braunen Punktwerte hinzu fügen?

  • Wie ich sehe, ist es nicht so einfach es verständlich zu erklären...

    Ich hoffe ich bin hiermit klarer:

    Die gelbe gerade Linie ist ein Graph (z.B. "Africa" oder "Europe") aus dem genannten Beispiel. Die y-Achse soll genau die Werte zB 1,2,3,... haben, innerhalb der sich auch die Werte der zb gelben Linie befinden. Im einfachsten Fall zB eine gerade horizontale Linie. (siehe Skizze, klappt bereits)

    Zu meinem Problem:

    Zum genannten Liniendiagramm möchte ich jetzt bei einem bestimmten x-Wert bei genau den Werten 1,2,3 vertikal wie in meiner Skizze ersichtlich die braunen Punktwerte anzeigen, welche aber andere Zahlendimensionen haben.

  • Mit Hilfe von Stackoverflow und der Doku von chart.js habe ich heraus gefunden, dass sich dein Vorhaben mit mehreren charts umsetzen lässt: Ein Linechart für die gelbe Linie und drei Scattercharts für die braunen Punkte. Ich habe mal eine Demo gemacht, Werte, Farben, Stärken der Punkte etc. kannst Du sicher selbst anpassen:

  • Sempervivum:

    Wow, großes Danke für deiner Mühe und Unterstützung.

    Habe mich mit deinem Beispiel intensiv befasst und es meinen Vorstellungen weiter angepasst.

    Eine Sache ist noch ausständig:

    Ich möchte nämlich, wie bereits erwähnt, nur bei bei den braunen Punktwerten bei genau definierter vertikaler Position (x,y) den Inhalt von drei unterschiedlichen Variablen anzeigen.

    Bei meinem Recharche im Netz bin ich zufällig auf die plugins gekommen und so habe ich als ersten Lösungsansatz (?) diese versucht in meinem Code einzubauen.

    Bei diesem Beispiel sollte als erster Lösungsansatz der value Wert der Punkte angezeigt werden, klappt aber leider auch nicht, ich bekomme die Ausgabe "[object Object]" neben dem braunen Punkten.

    Am Ende der Versuche sollte aber nicht der Wert (x,y) der braunen Punkte angezeigt werden, sondern der Inhalt von drei unterschiedlichen Variablen. Zum Beispiel:

    1. brauner Punkt (x1,y1) Wert der Variable ABC anzeigen

    2. brauner Punkt (x1,y2) Wert der Variable XYZ anzeigen

    Ich hoffe ich habe mich klar ausgedrückt und jemand kann mir bei der Umsetzung behilflich sein.

    Vielen Dank schon im Voraus!!!

  • Alles klar, der Grund dafür, dass "[object Object]" angezeigt wird ist, dass der Wert in deinem data-Array, der unter dem Parameter value zur Verfügung steht, ein Objekt mit x und y ist. Da für dich ja offenbar der y-Wert von Interesse ist, kannst Du diesen im Formatter verwenden:

    Code
            formatter: function(value){
                return value.y + ' (100%) ';        //der value wird leider nicht angezeigt. Es steht "[object Object]".
            }

    Wenn Du statt des y-Wertes eine andere Variable anzeigen willst, ist das ohne weiteres möglich. Du musst sie nur auswählen, dafür müsste im zweiten Parameter des Formatters der context zur Verfügung stehen und darin ein Index für den Chart bzw. das Dataset. Damit kannst Du dann die Variable auswählen.

  • Hallo,

    vielen Dank für deiner Hilfe.

    Klappt aber leider nicht ganz... :-/

    Habe das hier gefunden. Habe leider nicht verstanden wie ich das ganze umsetzen muss.

    Sorry, wie man sicher sieht, bin ich kein Experte.

    Mit eurer Mühe und Geduld schaffe aber auch ich es.

  • Was Du brauchst ist ein Identifier für den Chart bzw. das Dataset, damit Du die Variablen auswählen kannst. Sehe ich mir das Ganze in der Consolausgabe an, ergibt sich, dass dies der datasetIndex ist. Damit kannst Du deine Variablen dann auswählen:

  • Vielen Dank Sempervivum für deine sehr schnelle Hilfe und Geduld!

    Kann es sein, dass dein Code einen Fehler enthält?

    Habe es mit Hilfe mit deinem Lösungsansatz geschafft es zu lösen:

    Habe aber nicht verstanden, warum ich zum context.dataIndex 1 dazuzählen muss, damit es funktioniert.

    Habe ich etwa etwas falsch verstanden bzw. ist mein Code nur ein Zufall?

    Code
    var index = context.dataIndex +1;
  • Nein, weder ist mein Code fehlerhaft, noch hast Du etwas falsch verstanden. Nur unsere Testumgebungen unterscheiden sich offenbar: Ich habe in meiner Testdatei drei Scattercharts und Du nur einen mit unterschiedlichen y-Werten. Da hast Du sehr gut mitgedacht, auf die Idee hätte ich auch selber kommen können.

  • Sempervivum:

    Deshalb ist dein Code mit meinem nicht gegangen...

    Das freut mich. Wie man sieht muss ich aber noch sehr viel lernen und üben.

    Bedanke mich nochmals bei dir für deine Geduld und Mühe mir behilflich zu sein!!!!

    Vielen Dank für deine rasche und ausführliche Hilfe.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!