Gibt es eine Möglichkeit, ein Etikett mit c3js zu ändern?

Ich verwende die neue c3js Bibliothek. Gibt es eine Möglichkeit, ein Etikett für ein Datenelement im Diagramm zu ändern? Ich habe ein Balkendiagramm, in dem jeder Balken ein Dollarwert ist. Ich möchte, dass die Bezeichnungen für jeden Balken 100 statt 100 sind. Wenn ich den Wert auf 100 setze, kann die Bibliothek das Diagramm nicht erstellen. Gibt es eine Möglichkeit, das Etikett zu ändern - wenn nicht den zugrunde liegenden Wert?Gibt es eine Möglichkeit, ein Etikett mit c3js zu ändern?

Quelle

2014-05-12 bernie2436

Sie können die Formatierung für die Datenbeschriftungen und die Achsenhilfslinien angeben. Sehen Sie sich das Beispiel unten an.

<!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.

Schauen Sie sich die formatting options in d3.js oder Sie können Ihre eigene Funktion (siehe Kommentar gesetzt Code oben) schreiben.

Quelle

2014-05-13 01:06:18

Sie können auch Werte als String zeigen: 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 
     } 
    } 
});

Quelle

2014-05-21 06:59:17 Abhishek

wenn ich schließen 'x: 'x'' innerhalb Daten, werde ich Fehler d3.v3.min.js erhalten: 1 Fehler: ungültiger Wert für Attribut x = "NaN" a @ d3.v3.min.js: 1 (anonyme Funktion) @ d3.v3.min.js: 3Y @ d3.v3.min.js: 1Aa.each @ d3.v3.min .js: 3Aa.attr @ d3.v3.min.js: [email protected]: 1417init @ c3.js: 1289c3.generate @ c3.js: 1972 (anonyme Funktion) @ 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 Fehler: Ungültiger Wert für Attribut width = " NaN "u @ d3.v3.min.js: 1 (anonyme Funktion). Können Sie mir sagen, warum – codelearner

@ codelearner, eine Sache, die ein Grund sein kann, dass "Achse" Teil ist innerhalb '' Daten'', aber es sollte nicht da sein. Überprüfen Sie sorgfältig auf die korrekte Verschachtelung. Dieses Beispiel funktioniert. –

Gibt es eine Möglichkeit, ein Etikett mit c3js zu ändern?

Antwort

Verwandte Themen