Posizione legenda in alto a destra per una carta C3?

Question

C'è un modo per posizionare la legenda in 'in alto a destra' per i grafici c3?

Le opzioni correnti sembrano consentire solo "in basso" e "a destra". Ho notato che esiste un'opzione "Legenda personalizzata". Tuttavia, volevo controllare prima di procedere su questa strada.

Grazie

Answer 1

ho una stessa edizione. Così ho passato molto tempo a trovare la soluzione. E infine, ho trovato la soluzione. Qui condividerò questa soluzione.

Documento

Documento di C3 è buona. Ma l'esempio è così così. Correttamente l'esempio non mostra tutto su C3. E la posizione della leggenda è una di queste.

The example mostra la posizione della legenda può essere individuata solo in bottom, right and inset. È tutto. Ma nello document, puoi trovare più possibilità.

Vedere lo c3.legend.position nel documento. Il documento dice che la legenda può essere localizzata solo in bottom, right and inset. Ma non essere deluso. Guarda il seguente articolo, c3.legend.inset. E oggi quell'elemento farà risparmiare tempo.

Codice

Prima di tutto, guardare l'esempio.

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

Lo vedi? Questo è un top-right che vuoi. E il codice funziona meravigliosamente. Se si modifica anchor, la posizione della legenda verrà modificata. Ed è possibile regolare le coordinate con x e . E step potrebbe essere regolare la lunghezza della legenda. Se lo aumenti, la legenda sarà più lunga. Ma è la mia ipotesi. Per favore qualcuno spieghi di più.

Esempio

E ho codificato come di seguito. Ecco il mio esempio

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

---

spero C3 aggiungere o consultare su c3.legend.inset. Current example fare un po 'di confusione. Fino a quel momento spero che possa farti risparmiare tempo. Buona programmazione.

Answer 2

devo stessa domanda e ha trovato la prossima soluzione di inserire leggenda sopra tabella:

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

E leggenda non coprirà grafico.

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 
     } 
    } 
}); 

Sostituito undefined in x, ye step. La legenda è visualizzata in alto a destra.