Question

我有c3js区域样条线，其中一种填充颜色正常工作。我试图为图表的负面部分获得不同的颜色，因此低于0的区域具有一个且高于0的另一种颜色。也有可能在该区域的某个自定义区域上制作另一种颜色，例如从1到2标记。这可能吗？

Answer 1

您可以使用动态调整的渐变作为填充

在点/图例颜色方面确实有一些磕磕碰碰（但这些可能被视为比单一颜色更真实）。并且你总是可以在onrendered例程中进一步改变它们。

var chart = c3.generate({
    data: {
        columns: [
            ['data2', 130, 100, -340, 200, 150, 50]
        ],
        colors: {
            data2: 'url(#myGradient)',
        },
        type: 'area-spline'
    },
    oninit: function() {
        d3.select("svg defs").append("linearGradient")
          .attr("id", "myGradient")
          .attr("x1", 0)
          .attr("x2", 0)
          .attr("y1", 0)
          .attr("y2", 1)
          .html('<stop offset="0%" stop-color="red"/><stop offset="50%" stop-color="red" class="changer"/><stop offset="50.01%" stop-color="blue" class="changer"/><stop offset="100%" stop-color="blue"/>')
      ;
    },
    onrendered: function () {
            // get the bbox for the series you're interested in
        var path = d3.select("g.c3-areas-data2 > path");
        var pbbox = path.node().getBBox();

        var y = this.y; // the chart's y scale
        var zeroPoint = y(0);   // where zero sits on the scale

                // work out where zero sits in relation/ratio to the bbox
        var pct = (zeroPoint - pbbox.y) / pbbox.height;
        pct *= 100;

                // set that as the new gradient stop
        d3.selectAll("#myGradient stop.changer").data([pct, pct + .01])
            .attr("offset", function(d) { return d+"%"; })
         ;
    }
});

https://jsfiddle.net/9Lcu7ce9/

如何在c3js中以不同颜色分割区域样条区域

1 个答案: