創建柱形圖與DC.js

我想創建一個DC.js像下面的圖像柱形圖： enter image description here 創建柱形圖與DC.js

，我的數據是這樣的：

var data =[ 
    {name:'Venezuela',sale:300}, 
    {name:'Saudi',sale:253}, 
    {name:'Canada',sale:150}, 
    {name:'Iran',sale:125}, 
    {name:'Russia',sale:110}, 
    {name:'UAE',sale:90}, 
    {name:'US',sale:40}, 
    {name'China',sale:37} 
]

我嘗試創建，但我不不知道如何繪製x軸或y軸.i搜索並找到一些示例，但在這些示例中，所有的x軸都是時間唯一的，它使用.x(d3.time.scale()，但是我的x軸是不是時間，我不知道如何控制它。

更新

添加顏色以圖表

var colorScale = d3.scale.ordinal().range(['#DB0A5B','#F62459','#F1A9A0','#2C3E50','#26A65B','#E87E04','#D35400']); 
chart.colors(d3.scale.ordinal().range(colorScale);

來源

2014-07-17 MBehtemam

我不清楚你的問題在這裏。對於x尺度，你可以使用'.x（d3.scale.ordinal（））'（並且不要忘記'.xUnits（dc.units.ordinal）'）。如果你用你試過的東西發佈了一個jsfiddle，它可能會有所幫助。 – Gordon

這裏是一個快速的樣品，讓你開始：http://jsfiddle.net/djmartin_umich/s9c84/

chart 
.height(300) 
.width(800) 
.dimension(countryDimension) 
.group(countryGroup)

正如戈登說，你需要設置一個序規模：

.x(d3.scale.ordinal().domain(countries)) 
.xUnits(dc.units.ordinal)

這裏是你如何管理軸標籤：

.xAxisLabel("MMbbl = one million barrels") 
.yAxisLabel("Reserves (MMbbl)") 
.elasticY(true) 
.xAxis().ticks(3);

這將讓你像這樣的圖表：

enter image description here

像戈登所說，你將需要使用renderlet控制那裏的顏色。示例小提琴用此代碼更新：

chart 
    .renderlet(function(chart){ 
     debugger; 
    var colors = d3.scale.ordinal().domain(countries) 
     .range(["steelblue", "brown", "red", "green", "yellow", "grey", "blue", "black"]); 
    chart.selectAll('rect.bar').each(function(d){ 
     d3.select(this).attr("style", "fill: " + colors(d.data.key)); 
});

來源

2014-07-17 13:44:15

雖然，你會需要使用一個渲染器來獲得不同的顏色。目前，每個堆棧（圖層）都被分配一種顏色。 – Gordon

我嘗試用'chart.colors（）'添加顏色，但它不起作用。你能舉個例子嗎？謝謝。我正在更新我的代碼，爲我的嘗試。 – MBehtemam

創建柱形圖與DC.js

回答

相關問題