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

【问题标题】：How to split area-spline area in different colors in c3js如何在c3js中以不同颜色分割区域样条区域
【发布时间】：2017-12-14 07:38:32
【问题描述】：

我有 c3js 区域样条线，其中一种填充颜色工作正常。我试图让图表的负数部分颜色不同，因此低于 0 的区域有一种颜色，高于 0 的区域有另一种颜色。还有可能在该区域的某些自定义区域上制作另一种颜色，比如说从 1 到 2 标记。这可能吗？

【问题讨论】：

这似乎是不可能的。您可以查看c3js.org/reference.html#data-regions 选项，但它的功能非常有限。

标签： d3.js c3.js

【解决方案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/

【讨论】：