Question

下面的小提示显示了multichart上的2个堆叠条形图，可以应用哪种样式来定位它们以使它们不重叠？

   var testdata = [[{'x':0,'y':0.18308100617846632},{'x':1,'y':0.18308100617846632},{'x':2,'y':0.18308100617846632},{'x':3,'y':0.18308100617846632},{'x':4,'y':0.18308100617846632},{'x':5,'y':0.18308100617846632},{'x':6,'y':0.18308100617846632},{'x':7,'y':0.18308100617846632},{'x':8,'y':0.18308100617846632},{'x':9,'y':0.18308100617846632},{'x':10,'y':0.18308100617846632},{'x':11,'y':0.18308100617846632},{'x':12,'y':0.18308100617846632},{'x':13,'y':0.18308100617846632}],[{'x':0,'y':0.3848121729491284},{'x':1,'y':0.3848121729491284},{'x':2,'y':0.6064571483967448},{'x':3,'y':0.3848121729491284},{'x':4,'y':0.3848121729491284},{'x':5,'y':0.3848121729491284},{'x':6,'y':0.3848121729491284},{'x':7,'y':0.3848121729491284},{'x':8,'y':0.3848121729491284},{'x':9,'y':0.3848121729491284},{'x':10,'y':0.3848121729491284},{'x':11,'y':0.3848121729491284},{'x':12,'y':0.3848121729491284},{'x':13,'y':0.3848121729491284}],[{'x':0,'y':0.1399518819223031},{'x':1,'y':0.1399518819223031},{'x':2,'y':0.1399518819223031},{'x':3,'y':0.1399518819223031},{'x':4,'y':0.1399518819223031},{'x':5,'y':0.1399518819223031},{'x':6,'y':0.1399518819223031},{'x':7,'y':0.1399518819223031},{'x':8,'y':0.1399518819223031},{'x':9,'y':0.1399518819223031},{'x':10,'y':0.1399518819223031},{'x':11,'y':0.1399518819223031},{'x':12,'y':0.1399518819223031},{'x':13,'y':0.1399518819223031}],[{'x':0,'y':0.661327785950392},{'x':1,'y':0.661327785950392},{'x':2,'y':0.661327785950392},{'x':3,'y':0.661327785950392},{'x':4,'y':0.661327785950392},{'x':5,'y':0.661327785950392},{'x':6,'y':0.661327785950392},{'x':7,'y':0.661327785950392},{'x':8,'y':0.661327785950392},{'x':9,'y':0.661327785950392},{'x':10,'y':0.661327785950392},{'x':11,'y':0.661327785950392},{'x':12,'y':0.661327785950392},{'x':13,'y':0.661327785950392}],[{'x':0,'y':0.12912787561339684},{'x':1,'y':0.19822891999644937},{'x':2,'y':0.19524003452978822},{'x':3,'y':0.2022421270610378},{'x':4,'y':2.9546625202733403},{'x':5,'y':0.17245495458323432},{'x':6,'y':0.17518206801386724},{'x':7,'y':0.19136958873352614},{'x':8,'y':0.20233322594961195},{'x':9,'y':0.791354544787474},{'x':10,'y':1.8421373975341035},{'x':11,'y':0.50545378694344},{'x':12,'y':0.15839045811626706},{'x':13,'y':0.17249910157699552}]].map(function(data, i) {
        return {
            key: 'Stream' + i,
            values: data
        };
    });


    testdata[1].type = "bar";
    testdata[1].yAxis = 1;
    testdata[2].type = "bar";
    testdata[2].yAxis = 1;
    
    testdata[3].type = "bar";
    testdata[3].yAxis = 2;
    testdata[4].type = "bar";
    testdata[4].yAxis = 2;

    nv.addGraph(function() {
        var chart = nv.models.multiChart()
            .margin({top: 30, right: 60, bottom: 50, left: 70})
            .color(d3.scale.category10().range());

        chart.xAxis.tickFormat(d3.format(',f'));
        chart.yAxis1.tickFormat(d3.format(',.1f'));
        chart.yAxis2.tickFormat(d3.format(',.1f'));
        chart.bars1.stacked(true);
        chart.bars2.stacked(true);
        chart.bars1.groupSpacing(0.5);
        chart.bars2.groupSpacing(0.5);

        d3.select('#chart1 svg')
            .datum(testdata)
            .transition().duration(500).call(chart);

        return chart;
    });

text {
            font: 12px sans-serif;
        }
        svg {
            display: block;
        }
        html, body, #chart1, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }

<link href="https://nvd3-community.github.io/nvd3/build/nv.d3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js"></script>
<script src="https://nvd3-community.github.io/nvd3/build/nv.d3.js"></script>
<div id="chart1" >
    <svg> </svg>
</div>

Answer 1

以下是我对您的代码所做的不同。

将nv.models.multiChart()更改为nv.models.multiBarChart()

更新了chart以包含：

.showControls(false)
.stacked(true);

将图表属性替换为以下内容：

chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));

//chart.xAxis.tickFormat(d3.format(',f'));
//chart.yAxis.tickFormat(d3.format(',.1f'));
//chart.yAxis2.tickFormat(d3.format(',.1f'));
//chart.bars1.stacked(true);
//chart.bars2.stacked(true);
//chart.bars1.groupSpacing(0.5);
//chart.bars2.groupSpacing(0.5);

您可以找到代码here

的有效版本

希望它有所帮助。

修复多个堆叠条形图

1 个答案: