首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带线的Angular-NVD3堆叠条形图

带线的Angular-NVD3堆叠条形图
EN

Stack Overflow用户
提问于 2016-03-16 22:07:21
回答 2查看 3.1K关注 0票数 1

我是D3,NVD3和Angular-NVD3的新手。我需要使用Angular-NVD3创建一个类似于此的图表:

所以问题是:NVD3 Stacked Bar Chart Plus Line Overlapped

(在SO问题上有一个JS·菲德尔)。

Angular-NVD3有两个图表,每个图表完成了我需要的大部分,但不是全部:

那就是MultiBar和MultiChart。(http://krispo.github.io/angular-nvd3/#/quickstart)示例:

也就是说,我需要一个堆叠的条形图,在条形图的顶部覆盖一条(或多条)线。我认为,要做到这一点,必须使用"multiChart“而不是"multiBar”图表。(如果我错了,请纠正我)。

上面的SO示例修改了NVD3库,这是我想避免的。经过研究,我明白他们为什么选择这种方法了。

nv.d3.js (版本1.8.2),对于multiChart对象,第9068-9069行:

代码语言:javascript
运行
AI代码解释
复制
    bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
    bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),

如果您将这些行更改为.stacked(true),它会堆叠条形图。

如何使用Angular-NVD3并在不更改库的情况下完成所需的任务?

理想情况下,解决方案应该是纯配置。下一个最理想的情况是在运行时从我的封闭组件内部设置“堆栈”值,但我似乎无法访问该对象。

如果可能的话,我希望避免高度复杂的解决方案,因为这些抽象的全部要点是为了避免这样的复杂性。但是,所有解决方案都是受欢迎的。

EN

回答 2

Stack Overflow用户

发布于 2016-03-17 16:13:16

我找到了答案:

您可以更改配置中指定的callback()事件处理程序中的堆叠值:

代码语言:javascript
运行
AI代码解释
复制
chart: {
            type: 'multiChart',
...
            callback: function (chart) {
                chart.bars1.stacked(true);
                chart.bars2.stacked(true);
                chart.update();
            },
...
        }
    };
票数 4
EN

Stack Overflow用户

发布于 2019-04-12 14:39:36

使用multiChart。要获得并排的条形图,请在两个条形图数据集上设置yAxis: 1。

https://github.com/novus/nvd3/blob/master/examples/multiChart.html (回购示例涵盖了更多内容,而不仅仅是网站)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36047869

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档