C'è un modo per cambiare un'etichetta con c3js?

Sto utilizzando la nuova libreria c3js. C'è un modo per cambiare un'etichetta per un pezzo di dati nel grafico? Ho un grafico a barre in cui ogni barra è un valore in dollari. Voglio che le etichette di ogni barra siano $ 100 anziché 100. Se imposto il valore su $ 100, la libreria non può creare il grafico. C'è un modo per cambiare l'etichetta - se non il valore sottostante?C'è un modo per cambiare un'etichetta con c3js?

fonte

2014-05-12 bernie2436

È possibile specificare la formattazione per le etichette dei dati e le zecche degli assi. Dai un'occhiata all'esempio qui sotto.

<!doctype html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="./css/c3.css"> 
     <script src="./js/d3.min.js"></script> 
     <script src="./js/c3.min.js"></script> 
    </head> 
    <body> 
    <div class='chart'> 
    <div id='chart'></div> 
    </div> 
    <script> 
     var chart = c3.generate({ 
      data: { 
       columns: [ 
        ['data1', 30, 200, 100, 400, 150, 250], 
        ['data2', 130, 100, 140, 200, 150, 50] 
       ], 
       type: 'bar', 
       labels: { 
        format: { 
         y: d3.format("$,") 
         //y: function (v, id) { return "Custom Format: " + id; } 
        } 
       } 
      }, 
      axis : { 
       y : { 
        tick: { 
         format: d3.format("$,") 
         //format: function (d) { return "Custom Format: " + d; } 
        } 
       } 
      } 
     }); 
    </script> 
    </body> 
</html>

The resulting graph looks like this.

Scopri i oppure si può scrivere la propria funzione formatting options in d3.js (vedi commentata codice di cui sopra).

fonte

2014-05-13 01:06:18

È possibile anche visualizzare i valori come stringa: http://c3js.org/samples/data_stringx.html

var chart = c3.generate({ 
    data: { 
     x : 'x', 
     columns: [ 
      ['x', '$100', '$200', '$300', '$400'], 
      ['download', 30, 200, 100, 400], 
      ['loading', 90, 100, 140, 200], 
     ], 
     groups: [ 
      ['download', 'loading'] 
     ], 
     type: 'bar' 
    }, 
    axis: { 
     x: { 
      type: 'categorized' // this is needed to load string x value 
     } 
    } 
});

fonte

2014-05-21 06:59:17 Abhishek

se includo 'x: 'x'' all'interno dei dati, mi metterò errori d3.v3.min.js: 1 Errore: valore non valido per Attributo x = "NaN" a @ d3.v3.min.js: 1 (funzione anonima) @ d3.v3.min.js: 3Y @ d3.v3.min.js: 1Aa.each @ d3.v3.min .js: 3Aa.attr @ d3.v3.min.js: 3redraw @ c3.js: 1417init @ c3.js: 1289c3.generate @ c3.js: 1972 (funzione anonima) @ c3-chart.init.js: 135c @ jquery.js: 4p.fireWith @ jquery.js: 4x.extend.ready @ jquery.js: 4q @ jquery.js: 4 14d3.v3.min.js: 1 Errore: valore non valido per attributo width = " NaN "u @ d3.v3.min.js: 1 (funzione anonima). puoi dirmi perché – codelearner

@codelearner, una cosa che può essere una ragione è che la parte '' axis'' si trova all'interno di '' data'', ma non dovrebbe esserci. Verificare attentamente la corretta nidificazione. Questo esempio funziona. –

C'è un modo per cambiare un'etichetta con c3js?

risposta

Problemi correlati