Question

我正在使用基于d3js的c3js进行制图（使用SVG元素）。

c3js是否支持条形图，饼图和面积图的线性渐变着色？目前我能够让这个工作，但这是一个黑客。

在堆积条形图中获得圆角条也很困难，因为SVG不支持笔划左|右|上|下选项。

我还观察到即使在NVd3和Dimple.js中也不支持线性渐变和圆角条形图。

如果c3js支持这两个功能，那就太棒了。

Answer 1

由于我可以从c3 init回调函数中访问d3对象，所以我在init上添加了一个线性渐变，并从我的填充样式（在我的css中）调用它。

使用Javascript：

oninit: function () {

  d3.select('svg').append("linearGradient")
    .attr("id", "timeframe-gradient")
    .attr("gradientUnits", "userSpaceOnUse")
    .attr("x1", 0).attr("y1", 0)
    .attr("x2", 0).attr("y2", 100)
    .selectAll("stop")
    .data([
      {offset: "60%", color: "#666", opacity: 0},
      {offset: "100%", color: "#666", opacity: 1}
    ])
    .enter().append("stop")
    .attr("offset", function(d) { return d.offset; })
    .attr("stop-color", function(d) { return d.color; })
    .attr("stop-opacity", function(d) { return d.opacity;});

}

CSS（SASS）：

.event-timeframe {
  rect {
    fill: url(#timeframe-gradient);
  }
}

Answer 2

目前的C3版本没有实现。（我也一直在寻找这个）。

但是，已在C3 GitHub问题页面上请求该功能： https://github.com/masayuki0812/c3/issues/65

此功能已被C3的所有者标记为增强功能。有很多功能请求进入C3所以我不会指望他们在不久的将来实现这个功能。

您可以在C3的Google群组论坛中提问，因为可能有人自己实施了此功能。

如何使用c3js在条形图/饼图/面积图中填充渐变颜色

2 个答案: