Question

请打开此链接：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所示的图表。
现在我想用一些颜色填充图中显示的两条线之间的区域。我想让它像下面的 Fig：2 。

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

提前致谢。

Answer 1

这是一个老问题，但万一有人也遇到了这个问题。这是两条线之间填充的工作小提琴。 Fill between two lines

注意：在馈送到图表之前应该处理零点，因为从C3的角度来看，null将自动映射到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);}

如何使用C3图表填充两行之间的区域？

1 个答案: