javascript - 如何在c3.js中指定组合图表的顺序?

标签 javascript c3.js

我正在构建一个面积类型和条形类型的组合图表。图表的条形部分出现在区域部分下方,因此它被区域部分覆盖。像这样:

chart with order problem

我想将酒吧放在该区域前面。

我尝试更改 data.order 中的顺序,但不起作用。

预期结果是这样的:

chart with order problem

在检查器中,如果我手动更改元素的顺序,使 c3-charts-bars 位于 c3-charts-lines 之后,我会得到预期的结果,但是,有人知道如何使用 c3.js API 做到这一点吗?

最佳答案

我实际上正在使用react-c3包装 c3 库,因此我的解决方案基于 GitHub问题解决方案。

...
oninit: () => {
    let container = ReactDom.findDOMNode(this);
    let chart = container.getElementsByClassName('c3-chart')[0];
    let bars = chart.getElementsByClassName('c3-chart-bars')[0];
    bars.parentNode.append(bars);
},
...

关于javascript - 如何在c3.js中指定组合图表的顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57381495/

相关文章:

javascript - native JavaScript 中的动画输入

javascript - c3.js 中的堆叠圆环图

charts - 如何向 c3.js 图表添加标题

javascript - 如何将 C3 Gauge Chart 集成到 Angular 5 中?

javascript - 创建时将部分字符串设为粗体

javascript - 如何用JS动态添加HTML?

javascript - 我的图表线条未按顺序排列

javascript - 是否可以为 c3.js 加载新的 y 轴标签?

javascript - css-grid 在 Firefox 和 Chrome 中呈现不同

javascript - 在 React Native 中使用上下文