Oben rechts Legende Position für ein C3-Diagramm?

Question

Gibt es eine Möglichkeit, die Legende für c3-Diagramme 'oben rechts' zu positionieren?

Die aktuellen Optionen scheinen nur "unten" und "rechts" zuzulassen. Ich habe bemerkt, dass es eine 'Custom Legend Option' gibt. Ich wollte es jedoch überprüfen, bevor ich diesen Weg fortsetze.

Dank

Answer 1

Ich habe ein gleiches Problem. Also verbrachte ich viel Zeit, um die Lösung zu finden. Und schließlich habe ich die Lösung. Hier werde ich diese Lösung teilen.

Dokument

Dokument von C3 ist gut. Aber Beispiel ist so. Richtig zeigt das Beispiel nicht alles über C3. Und die Position der Legende ist eine davon.

The example zeigen Position der Legende kann nur in bottom, right and inset gefunden werden. Das ist alles. Aber in der document finden Sie mehr Möglichkeiten.

Schauen Sie sich die im Dokument an. Das Dokument sagt, dass die Legende nur in bottom, right and inset gefunden werden kann. Aber sei nicht enttäuscht. Sehen Sie sich den folgenden Artikel an: c3.legend.inset. Und heute wird dieser Artikel unsere Zeit sparen.

-Code

Zunächst einmal am Beispiel.

legend: { 
    inset: { 
    anchor: 'top-right' 
    x: 20, 
    y: 10, 
    step: 2 
    } 
} 

Sie sehen es? Das ist ein top-right Sie wollen. Und Code funktioniert wunderbar. Wenn Sie anchor ändern, wird die Position der Legende geändert. Und Sie können Koordinaten mit x und y anpassen. Und step kann Länge der Legende anpassen. Wenn Sie es erhöhen, wird die Legende länger sein. Aber ich vermute es. Bitte jemand mehr darüber zu erklären.

Beispiel

Und ich codiert wie unten. Hier ist mein Beispiel.

var appActivityChart = c3.generate({ 
    data: { 
     ... 
    }, 
    legend: { 
     show: true, 
     position: 'inset', 
     inset: { 
      anchor: 'top-right', 
      x: 250, 
      y: 50, 
      step: 5 
     } 
    } 
}); 

---

Ich hoffe, C3 hinzufügen oder über c3.legend.inset beziehen. Current example etwas Verwirrung machen. Bis dahin hoffe ich, dass es dir Zeit sparen kann. Gute Kodierung.

Answer 2

Ich habe dieselbe Frage und fand nächste Lösung Legende obigen Tabelle zu platzieren:

legend: { 
    position: 'inset', 
    inset: { 
     anchor: 'top-left', 
     x: 20, 
     y: -40, 
     step: 1 
    } 
}, 
padding: { 
    top: 40 
} 

Und Legende wird nicht Diagramm decken.

Answer 3

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['data1', 30, 200, 100, 400, 150, 250], 
      ['data2', 50, 20, 10, 40, 15, 25] 
     ] 
    }, 
    legend: { 
     show: true, 
     position: 'inset', 
     inset: { 
      anchor: 'top-right', 
      x:undefined, 
      y: undefined, 
      step: undefined 
     } 
    } 
}); 

Ersetzt undefined in x, y und Schritt. Die Legende wird oben rechts angezeigt.