C3: Logarithmisches Diagramm

Erstellt am 20. Mai 2014  ·  16Kommentare  ·  Quelle: c3js/c3

Hallo an alle,
Ich habe hier und auf der Beispielseite ein wenig gesucht, aber nichts zu logarithmisch skalierten Achsen gefunden. Ist es möglich, sie zu erstellen? Wenn nicht, betrachten Sie dies als Feature-Anfrage.
Mit freundlichen Grüßen,
Jakow.

C-feature-request C-new-chart

Hilfreichster Kommentar

das ist ein ziemlich hässlicher hack. Wäre es möglich, eine API bereitzustellen, die das Anschließen einer beliebigen d3-Waage ermöglicht?

Alle 16 Kommentare

Hallo, leider derzeit nicht. Jetzt müssen Sie die logarithmusskalierten Daten selbst generieren und grafisch darstellen.
Ich werde später als neues Feature betrachten.

Hallo Masayuki,

Sie müssen die logarithmusskalierten Daten generieren

meinst du, dass es jetzt möglich ist, diese Funktion zu emulieren? Ich habe die #Axis-Beispiele durchgesehen, aber keine Möglichkeit bemerkt, die Häkchen an beliebigen Positionen zu platzieren. Welches Beispiel sollte ich mir ansehen?
Mit freundlichen Grüßen und vielen Dank für Ihre Zeit und Ihre Arbeit,
Jakow.

Wenn Sie Ihre Daten vorbereiten, konvertieren Sie sie in eine logarithmische Skala. Nehmen wir an, Sie haben in Python eine solche Liste

[100,1000,10000]

Du machst das einfach

import math
log_list = map(math.log10,[100,1000,10000])

Eine Implementierung von Masayukis Workaround:

data_test_original = ['data1', 10, 100, 1000, 3, 500, 50, 5, 3000]
data_test = ['data1'];
for(var i=1; i<data_test_original.length; i++){
    data_test[i] = Math.log(data_test_original[i]) / Math.LN10;
}

var chart_test = c3.generate({
    bindto: '#chart_test',
    size: {
        height: 240,
        width: 480
    },
    data: {
      columns: [
        data_test
      ]
    },
    axis : {
        y : {
            tick: {
               format: function (d) { return Math.pow(10,d).toFixed(2); }
            }
        }
    },
});

hai @pbustosl ,, es ist Arbeit für mich! thx ... aber wenn ich den Wert 0 in data1 habe, funktioniert es nicht, wie kann ich mit dem Wert 0 umgehen? Danke

Folgendes würde auch die Werte formatieren:

data_test_original = ['data1', 10, 100, 1000, 3, 500, 50, 5, 3000]
data_test = ['data1'];
for(var i=1; i<data_test_original.length; i++){
    data_test[i] = Math.log(data_test_original[i]) / Math.LN10;
}

var chart_test = c3.generate({
    size: {
        height: 240,
        width: 480
    },
    data: {
        type:"bar",
      columns: [
        data_test
      ],
      labels : {show:true,
          format: {
              data1 : function(d,id){console.log(id, Math.pow(10,d));return Math.pow(10,d).toFixed(0);}
          }
      }
    },
    axis : {
        y : {
            show:false,
            tick: {
               format: function (d) { return Math.pow(10,d).toFixed(0); }
            }
        }
    },
});

das ist ein ziemlich hässlicher hack. Wäre es möglich, eine API bereitzustellen, die das Anschließen einer beliebigen d3-Waage ermöglicht?

+1 ...ich muss ein Diagramm im logarithmischen Maßstab zeichnen.

Ich möchte auch die Möglichkeit haben, meine y-Achse(n) auf log einzustellen

Ich würde auch gerne eine logarithmische Skala für die y-Achse verwenden können.

Gibt es Neuigkeiten zu diesem Thema?

Versucht, dieses Problem anzugehen (#2100). Dies ist nicht 100% perfekt, aber es kann für viele Fälle ausreichend sein.

Ich habe @pbustosl- Workaround

aber wenn der Datenwert 1 ist, begann die y-Achse bei 1 . auch wenn der Datenwert 0 war, wurde das Diagramm nicht gerendert.

Ich habe dafür einen Workaround gemacht.
Bitte beziehen Sie sich auf diese JSFiddle https://jsfiddle.net/86chryat/

d3.js unterstützt direkt die Log-Skalierung auf einer Achse, daher wäre es wirklich schön, wenn dies in c3 aufgetaucht werden könnte. Es ist eine viel schönere Lösung als die Neuberechnung der Daten, da es auch die Ticks verarbeitet.

Ich stimme zu, dass die Log-Skala nützlich wäre

@masayuki0812 -

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

Zerim picture Zerim  ·  3Kommentare

DieterSpringer picture DieterSpringer  ·  4Kommentare

MarcusJT picture MarcusJT  ·  4Kommentare

kethomassen picture kethomassen  ·  3Kommentare

jstone-ponderosa picture jstone-ponderosa  ·  3Kommentare