2015-05-12 17 views
7

Come posso modificare il testo della legenda del grafico a torta. Sto usando i grafici c3 nella mia pagina php. Ho già letto la documentazione delle classifiche in c3 ma senza fortuna.Come posso cambiare il testo della legenda nel grafico a torta c3

Attualmente sto usando questo codice mostra legenda per true ma non riesco a cambiare il testo che ho provato.

var chart = c3.generate({ 
     bindto: '#container', 
     padding: { 
        top: 10, 
        right: 0, 
        bottom: 10, 
        left: 0, 
      }, 
     data: { 
      columns: [<?php echo $pieChartDataString; ?>], 
      type : 'pie', 
      labels: true 
     }, 
     legend: { 
       show: true, 
       position: 'upper-center' 
       format: { 
         title: function() { return "Legend title"; }, 
         name : function() { return "Legend name"; }, 
         value: function() { return "Legend value";} 
         } 
       } 

    //But these legend values or not showing 

    }); 

Non mostra i miei valori di legenda, mostra sempre solo colonne come legenda.

Esiste un modo per modificare i valori della legenda.

risposta

9

Non hai fornito i dati che vengono emessi dal tuo php, quindi è difficile da dire.

Ma il primo elemento in ciascuna matrice di colonne determina il nome che va nella legenda. Quindi:

columns: [ 
    ['this is legend 1', 30], 
    ['put your value here', 120], 
] 

risulterebbe nelle etichette della legenda "questa è la legenda 1" e "inserisci qui il tuo valore".

Ecco un violino: http://jsfiddle.net/jrdsxvys/9/

Modifica ... Un'altra opzione è quella di utilizzare la proprietà nomi, come fatto qui: http://jsfiddle.net/jrdsxvys/40/

data: { 
    columns: [ 
     ['d1', 30], 
     ['d2', 120] 
    ], 
    type: 'pie', 
    labels: true, 
    names: { 
     d1: 'some name here', 
     d2: 'another name' 
    } 
} 
1

@agpt Sì. La proprietà names è un buon modo per andare generalmente perché la prima proprietà dell'array di dati delle colonne, ad esempio 'd1', viene usata quando si fanno cose come avere più tipi sui grafici. ad esempio, per una combinazione di bar e line utilizzando types invece di type: 'pie':

columns: [ 
    ['bar_1', 3, 8, 6], 
    ['bar_2', 4, 0, 7], 
    ['bar_3', 2, 3, 0] 
], 

types: { 
    bar_1: 'bar', 
    bar_2: 'line', 
    bar_3: 'bar' 
}, 

names : { 
     bar_1: 'Initial', 
     bar_2: '3 month', 
     bar_3: '6 month'     
} 

Quindi, utilizzando la proprietà nomi consente di utilizzare più nomi 'dinamica' di proprietà e di essere coerente in tutto il config.