dimplejs 100％堆疊垂直酒吧與日期的兩個值

我有一個谷歌圖表100％堆積圖表，我想轉換爲dimplejs。dimplejs 100％堆疊垂直酒吧與日期的兩個值

兩個y值是等於100％2個百分比值的組合，但我只有一個百分比值和所述第二應完成的另一部分爲等於100％的

X系列杆是一個月/年的組合。

這是一個功能性的嘗試，但注意到我基本上欺騙了我的數據以匹配示例所期望的。

var svg = dimple.newSvg("#chartContainer", 900, 400); 
    var data = [ 
     {'YRMO': '01-01-2014', 'halfit': 'first', 'Percent':'24'}, 
     {'YRMO': '02-01-2014', 'halfit': 'first', 'Percent':'76'}, 
     {'YRMO': '03-01-2014', 'halfit': 'first', 'Percent':'31'}, 
     {'YRMO': '04-01-2014', 'halfit': 'first', 'Percent':'69'}, 
     {'YRMO': '05-01-2014', 'halfit': 'first', 'Percent':'20'}, 
     {'YRMO': '06-01-2014', 'halfit': 'first', 'Percent':'70'}, 
     {'YRMO': '07-01-2014', 'halfit': 'first', 'Percent':'28'}, 
     {'YRMO': '08-01-2014', 'halfit': 'first', 'Percent':'70'}, 
     {'YRMO': '01-01-2014', 'halfit': 'second', 'Percent':'76'}, 
     {'YRMO': '02-01-2014', 'halfit': 'second', 'Percent':'24'}, 
     {'YRMO': '03-01-2014', 'halfit': 'second', 'Percent':'69'}, 
     {'YRMO': '04-01-2014', 'halfit': 'second', 'Percent':'31'}, 
     {'YRMO': '05-01-2014', 'halfit': 'second', 'Percent':'80'}, 
     {'YRMO': '06-01-2014', 'halfit': 'second', 'Percent':'30'}, 
     {'YRMO': '07-01-2014', 'halfit': 'second', 'Percent':'72'}, 
     {'YRMO': '08-01-2014', 'halfit': 'second', 'Percent':'30'}, 
     ]; 

    var myChart = new dimple.chart(svg, data); 
    myChart.setBounds(65, 45, 505, 315) 
    myChart.addCategoryAxis("x", "YRMO"); 
    myChart.addPctAxis("y", "Percent"); 
    myChart.addSeries("halfit", dimple.plot.bar); 
    myChart.addLegend(200, 10, 380, 20, "right"); 
    myChart.draw();

什麼，我掙扎是我怎樣才能使這項工作：基於斷值的該系列的總和

var data = [ 
     {'YRMO': '01-01-2014', 'Percent':'24'}, 
     {'YRMO': '02-01-2014', 'Percent':'76'}, 
     {'YRMO': '03-01-2014', 'Percent':'31'}, 
     {'YRMO': '04-01-2014', 'Percent':'69'}, 
     {'YRMO': '05-01-2014', 'Percent':'20'}, 
     {'YRMO': '06-01-2014', 'Percent':'70'}, 
     {'YRMO': '07-01-2014', 'Percent':'28'}, 
     {'YRMO': '08-01-2014', 'Percent':'70'}];

My JSFiddle....

來源

2015-02-09 Frank Tudor

您是否需要爲兩個零件（給定的百分比，其餘的百分比可以延伸到100）都有條形，還是隻有原始數據沒有剩餘條件才能工作？（我想我很好奇它最初看起來像谷歌圖表） – ne8il 2015-02-09 20:05:24

其實我希望從他第一次基於差異（價值）派生第二堆酒吧......我正在考慮做某種攔截逆轉數據輸入到dimple.chart（）之前。但我想知道除了用我的數據集外，是否還有一種較不機械的方式。我的jsfiddle中的圖表看起來像我的谷歌圖表，只是我用來使它變得不同的方法，我是新來的酒窩，我相信我會弄清楚一些事情。 – 2015-02-10 00:30:52

酒窩的百分之軸工程/類別的交集，所以它只會在你像你說的那樣用數據集加入補碼值的時候才起作用。它應該是很容易產生相反的價值觀：

var data = [ 
    {'YRMO': '01-01-2014', 'Percent':'24'}, 
    {'YRMO': '02-01-2014', 'Percent':'76'}, 
    {'YRMO': '03-01-2014', 'Percent':'31'}, 
    {'YRMO': '04-01-2014', 'Percent':'69'}, 
    {'YRMO': '05-01-2014', 'Percent':'20'}, 
    {'YRMO': '06-01-2014', 'Percent':'70'}, 
    {'YRMO': '07-01-2014', 'Percent':'28'}, 
    {'YRMO': '08-01-2014', 'Percent':'70'}]; 
//add property for first half (or put directly in data if possible) 
data.forEach(function(row){ 
    row.halfit = 'first'; 
}); 

//create second half 
var opposites = data.map(function(row){ 
    return { "YRMO" : row.YRMO, 
     "Percent": (100 - Number(row.Percent)), 
     "halfit" : "second" 
     }; 
}); 
//combine the two - concat returns a new array 
var chartData = data.concat(opposites); 
var myChart = new dimple.chart(svg, chartData); 
... 
//add order rule so original data is on bottom 
var series = myChart.addSeries("halfit", dimple.plot.bar); 
series.addOrderRule(['first', 'second']);

chart with complement bars

否則，你可以只用100鎖定的措施軸圖表而不對面酒吧的原始值（這隻會工作，因爲你的價值觀是已經但是百分比）：

var yAxis = myChart.addMeasureAxis("y", "Percent"); 
yAxis.overrideMax = 100;

chart with only original bars

但是它的聲音這樣做對你的用例不起作用，但它是一種選擇。

來源

2015-02-10 14:22:34 ne8il

感謝您的幫助...該解決方案看起來可行:) – 2015-02-10 15:57:51

dimplejs 100％堆疊垂直酒吧與日期的兩個值

回答

相關問題