c3jsの異なる色で領域 - スプライン領域を分割する方法

Question

c3js領域スプラインが1つの塗りつぶし色で正常に動作しています。私は、グラフの負の部分の色を取得しようとしているので、0未満の領域には0以上の色があります。 また、エリアのカスタム領域に別の色をつける可能性もあります。それは可能ですか？

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/