2014-05-12 6 views
5

मैं नई c3js लाइब्रेरी का उपयोग कर रहा हूं। क्या चार्ट में डेटा के टुकड़े के लिए लेबल बदलने का कोई तरीका है? मेरे पास एक बार चार्ट है जहां प्रत्येक बार एक डॉलर मूल्य है। मैं चाहता हूं कि प्रत्येक बार के लिए लेबल 100 के बजाय $ 100 हो। यदि मैं मान $ 100 पर सेट करता हूं तो लाइब्रेरी चार्ट नहीं बना सकती है। क्या लेबल बदलने का कोई तरीका है - अगर अंतर्निहित मूल्य नहीं है?क्या c3js के साथ लेबल बदलने का कोई तरीका है?

उत्तर

8

आप डेटा लेबल और एक्सिस टिक्स दोनों के लिए स्वरूपण निर्दिष्ट कर सकते हैं। नीचे दिए गए उदाहरण पर एक नज़र डालें।

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

formatting options in d3.js या अपने खुद के समारोह आप लिख सकते हैं (ऊपर कोड बाहर टिप्पणी की) चेक बाहर।

6

तुम भी स्ट्रिंग के रूप में मान दिखा सकते हैं: 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 
     } 
    } 
}); 
+0

अगर मैं 'एक्स में शामिल हैं: 'डेटा अंदर x'', मैं त्रुटियों d3.v3.min.js मिल जाएगा: 1 त्रुटि: के लिए अमान्य मान विशेषता x = "NaN" a @ d3.v3.min.js: 1 (अनाम कार्य) @ 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 (अनाम कार्य) @ 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 त्रुटि: विशेषता चौड़ाई = " NaN "u @ d3.v3.min.js: 1 (अनाम कार्य)। क्या आप मुझे बता सकते हैं कि क्यों – codelearner

+0

@codelearner, एक कारण यह हो सकता है कि 'अक्ष 'भाग' '' '' '' '' '' '' '' '' '' '' '' '' ''~~~~ सही घोंसले के लिए ध्यान से जांचें। यह उदाहरण काम करता है। –

संबंधित मुद्दे

 संबंधित मुद्दे