如何使用 C3 图表填充两条线之间的区域？答案

【问题标题】：How to fill the area between two lines using C3 chart?如何使用 C3 图表填充两条线之间的区域？
【发布时间】：2016-01-30 20:13:16
【问题描述】：

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

将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'
      }
    }
  }
});

您将能够看到如下图：1 所示的图表。
现在我想用一些颜色填充图表中显示的两条线之间的区域。我想让它像下面的图：2。

Fig:1 and then Fig:2
请帮帮我。

提前致谢。

【问题讨论】：

标签： c3.js

【解决方案1】：

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

注意：在输入图表之前应该处理空点，因为从 C3 的角度来看，空点会自动映射到 0。

代码sn-p：

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);}

【讨论】：

当我们使用 x 轴类型“类别”时，此解决方案不起作用。那么，你能帮帮我吗？
@SubhashDiwakar here。您需要更改 d3.svg.area() 的 x 以使用索引，而不是值。function(d, i) => xscale(i)
是的，使用相同，但 xscale(i) 为每个索引返回 0。