c3.js - 如何使用 C3 图表填充两条线之间的区域？

Question

1. 请打开此链接:http://c3js.org/samples/timeseries.html

2. 将textarea的代码替换成下面的代码:

   var chart = c3.generate({
     data: {
       x: 'x',
       columns: [
         ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04',],
         ['bottomline', null,30, 150, 250],
         ['topline', 130, 340, 350,null]
       ]
     },
     axis: {
       x: {
         type: 'timeseries',
         tick: {
           format: '%Y-%m-%d'
         }
       }
     }
   });
   

3. 您将能够看到如下图 1 所示的图表。

4. 现在我想用一些颜色填充图中两条线之间的区域。我想让它像下面的图:2。

   Fig:1 and then Fig:2

5. 请帮我解决这个问题。

提前致谢。

Answer 1

这是一个老问题，但以防万一有人也遇到这个问题。这是一个用于在两条线之间填充的工作 fiddle 。 Fill between two lines

注意:空点应该在馈送到图表之前处理，因为从 C3 的角度来看，空点将自动映射到 0。

代码片段:

function fillArea(){
var indexies = d3.range( items.length );
var yscale = chart.internal.y;            
var xscale = chart.internal.x; 

var area = d3.svg.area()
  .interpolate("linear")
  .x(function(d) { return xscale(new Date(items[d].x)); })
  .y0(function(d) { return yscale(items[d].bottomline); })
  .y1(function(d) { return yscale(items[d].topline); });  

d3.select("#mychart svg g").append('path')
  .datum(indexies)
  .attr('class', 'area')
  .attr('d', area);}