는 어떻게 잘 작동 하나 채우기 색 c3js 지역 스플라인이 c3js

Question

에 서로 다른 색으로 영역 스플라인 영역을 분할한다. 나는 차트의 음수 부분에 대해 다른 색을 얻으려고하므로 0 이하의 영역에는 0 이상의 색이 있습니다. 또한 지역의 일부 사용자 지정 영역에 다른 색을 표시 할 가능성이 있습니다. 1에서 2까지 표시 할 수 있습니다. 그게 가능하니?

Answer 1

당신은 채우기

그것은 점/전설 색상의 측면에서 노크 기능의 몇 가지있다처럼 동적으로 조정 그라데이션을 사용할 수 있습니다 (그러나 이들은 하나의 색상보다 진실한 것으로 볼 수 있음). 그리고 당신은 언제나 온난화 된 일상에서 그 것들을 더 변경할 수 있습니다.

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/