Question

堆叠区域图表有点麻烦。单击＆＃34;展开＆＃34;选项。 expand选项的y轴范围为0％到100％，但值为y * 100％。

例如，拿这个数据集......

x [1,2,3,4,5,6,7]

y [0, 140, 451, 867, 903, 960, 1000]

140 + 451 + 867 + 903 + 960 + 1000 = 4321

960 / 4321 * 100% = 22.21%

因此，使用扩展选项时，当我希望它等于实际百分比22.21％时，值960为960％。

是否有一种方法可以格式化数据，使得y值在＆＃34;展开＆＃34;范围内调整为0％-100％范围。风格？
或者，有没有办法在用户点击＆＃34;展开＆＃34;选项？

Answer 1

如果您的区域图形作为流或堆叠图形正常工作，它应自动扩展。一个可能的问题 - 如果您设置了yDomain或forceY属性，那么您的展开视图将无效。

Answer 2

转到nv.d3中的第12863行，然后将代码编辑为...

    stacked.dispatch.on('elementMouseover.tooltip', function(evt) {

    evt.point['x'] = stacked.x()(evt.point);
    if(stacked.style() == 'expand'){
            evt.point['y'] = evt.point.display.y;
    }else{  evt.point['y'] = stacked.y()(evt.point);}

    tooltip.data(evt).position(evt.pos).hidden(false);
});

Angular nvd3堆栈面积图 - 扩展选项 - 0％到100％范围

2 个答案: