我正在尝试使用 lineplusbar 图表对实际与必需进行比较。但是,我很难让它看起来完全符合我的要求。有没有办法让两条线都使用一个轴?
代码:https ://github.com/tvinci/webs/blob/gh-pages/lineplusbar.html
示例:http ://tvinci.github.io/webs/lineplusbar.html
页面代码:
nv.addGraph(function() {
//var testdata = exampleData();
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
//if this is commented out, the graph does not display properly
.x(function(d,i) { return i });
//this is the cheat I use to show the correct X axis
//chart.xAxis.tickFormat(function(d) { return d3.format(',f')(d+1)+"x" });
chart.y1Axis.tickFormat(d3.format(',f'));
chart.y2Axis.tickFormat(d3.format(',f'));
//forces the chart to start at 0
// if you set this to [0,100] and your data's domain is -10 to 110, the domain will be [-10,110]
chart.lines.forceY([0]);
d3.select('#chart svg').datum(eval("overview_data")).transition().duration(500).call(chart);
d3.selectAll("rect.nv-bar").style("fill", function(d, i){return i > 50 ? "red":"blue";});
nv.utils.windowResize(chart.update);
数据:
var overview_data=[
{ "key" : "Achieved" , "bar": true,"values" : [ [ "1x" , 30] , [ "2x" , 70] , [ "3x" , 200] ]} ,
{ "key" : "Required" , "values" : [ [ "1x" , 50] , [ "2x" , 100] , [ "3x" , 150] ]}
].map(function(series) {series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });return series;});
});