酒窩x2軸需要綁定到x的位置

所以這個問題是關於一個輔助X軸和控制我需要正確渲染我的圖表。酒窩x2軸需要綁定到x的位置

我有堆疊的條形圖上的x，x2，y。

我想獲得位於頂部（成功）的x2系列文本內容。

我需要x（按日期排序）綁定到x2（似乎工作）。

現在我需要在x上直接對齊x2。這個怎麼用？

下面是代碼：

<div id="chartContainer"></div> 
<script type="text/javascript"> 
function svgBuild() { 

var data = [ 
{'yrmo': '01-01-2014', 'prcnt':'24', 'halfit' : 'first', 'arbNmbr':'2400'}, 
{'yrmo': '02-01-2014', 'prcnt':'76', 'halfit' : 'first', 'arbNmbr':'2327'}, 
{'yrmo': '03-01-2014', 'prcnt':'31', 'halfit' : 'first', 'arbNmbr':'1900'}, 
{'yrmo': '04-01-2014', 'prcnt':'69', 'halfit' : 'first', 'arbNmbr':'2800'}, 
{'yrmo': '05-01-2014', 'prcnt':'20', 'halfit' : 'first', 'arbNmbr':'1780'}, 
{'yrmo': '06-01-2014', 'prcnt':'70', 'halfit' : 'first', 'arbNmbr':'1800'}, 
{'yrmo': '07-01-2014', 'prcnt':'28', 'halfit' : 'first', 'arbNmbr':'2000'}, 
{'yrmo': '08-01-2014', 'prcnt':'70', 'halfit' : 'first', 'arbNmbr':'1900'}]; 

//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, 
     "prcnt": (100 - Number(row.prcnt)), 
     "halfit" : "second", 
     "arbNmbr" : Number(row.arbNmbr) 
     }; 
}); 

var svg = dimple.newSvg("#chartContainer", 850, 400); 

var myChart = new dimple.chart(svg, data.concat(opposites)); 
    myChart.setBounds(65, 45, 800, 315); 

var x = myChart.addCategoryAxis("x", "yrmo"); 
    x.addOrderRule("yrmo", true); 

var y = myChart.addPctAxis("y", "prcnt"); 
var x2 = myChart.addCategoryAxis("x", "arbNmbr"); 
    x2.addOrderRule("yrmo", true); 

    myChart.addSeries("halfit", dimple.plot.bar); 
    myChart.addSeries("arbNmbr", dimple.plot.area, [x2,y]); 
    myChart.draw(); 
} 
svgBuild(); 
</script>

And here is my jsfiddle work in progress.

來源

2015-02-10 Frank Tudor