C3 條形圖 - 自定義 X 軸標簽

Question

我在我的應用程序中使用 C3 圖表庫進行數據可視化。 我試圖用 x,y 值繪制條形圖。 圖表顯示正常，但我的圖表中未顯示 x 軸刻度值。 但同樣在圖例部分顯示良好。 我嘗試了很多方法，但沒有運氣。 請幫助我實現這一目標。

 var chart = c3.generate({ /* size: { height: 400 }, */ bindto:"#chart", data: { json: [{"<-10":0,"<-8":0,"<-6":3,"<-4":1,"<-2":15,"<0":40,"<2":82,"<4":68,"<6":7,"<8":6,"<10":3,">10":1}], keys: { value: ["<-10","<-8","<-6","<-4","<-2","<0","<2","<4","<6","<8","<10",">10"], }, type: 'bar' }, bar: { ratio: 1.5 }, color: {//referred color code from materializecss color palette // pattern: ['#f44336', '#ef5350', '#e57373', '#ef9a9a', '#ffcdd2', '#ffebee', '#c8e6c9', '#a5d6a7', '#81c784', '#4caf50', '#388e3c', '#1b5e20'] pattern: ['#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#1b5e20', '#388e3c', '#4caf50', '#81c784', '#a5d6a7', '#c8e6c9'] }, tooltip: { format: { title: function (d) { return 'Test'; }, value: function (value, ratio, id) { return value; } } } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script> <div id="chart"></div>

Fiddle_Link

Answer 1

您將 JSON 數據作為具有許多屬性的一個對象而不是一組謹慎的對象提供。 我通過引入 'label' 和 'val' 屬性將數據有效地轉換為名稱 = 值對。 這為您提供了使用更多 C3 功能的好處。

 var chart = c3.generate({ size: { height: 200, width: 600 }, bindto:"#chart", data: { json: [{label: "<-10", val:0},{label: "<-8",val:0},{label: "<-6",val:3},{label: "<-4",val:1},{label: "<-2",val:15},{label: "<0",val:40},{label: "<2",val:82},{label: "<4",val:68},{label: "<6",val:7},{label: "<8",val:6},{label: "<10",val:3},{label: ">10",val:1}], keys: { x: 'label', value: ["val"], }, type: 'bar', color: function(color, d){ var lst = ['#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#1b5e20', '#388e3c', '#4caf50', '#81c784', '#a5d6a7', '#c8e6c9'] return(lst[d.index]); } }, legend: { show: false }, axis: { x: { type: 'category', tick: { centered: true}, } }, bar: { width: { ratio: 1 } }, tooltip: { format: { title: function (d) { return 'Test'; }, value: function (value, ratio, id) { return value; } } } });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script> <div id="chart"></div>