C3.js填充曲线之间的区域 [英] C3.js fill area between curves

问题描述

我有这样的图表

我需要在虚线之间填充3个区域.例如:在2条红色虚线，2条蓝色虚线和2条绿色虚线之间填充区域.

I need to fill 3 area between dashed line. for example : fill area between 2 red dashed line, 2 blue dashed line and 2 green dashed line.

我尝试这样做:

function fillArea(){
    var d = {};
    var x = [];
    var y1 = [];
    var y0 = [];

    for(var i = 0; i < chartJson.length; i++){
        x.push(chartJson[i].run_date);
        y0.push(chartJson[i].diviationMinus);
        y1.push(chartJson[i].diviationPlus);
    }
    d.x = x;
    d.y1 = y1;
    d.y0 = y0;


    var area = d3.svg.area()
                 .x(function(d) {return x(d.x); })
                 .y0(function(d) { return y(d.y0); })
                 .y1(function(d) { return y(d.y1); });  

}
fillArea();

但是什么也没发生.这是jsfiddle https://jsfiddle.net/1xnc6y58/

but nothing happen. Here is jsfiddle https://jsfiddle.net/1xnc6y58/

推荐答案

将fillArea()函数更改为以下代码:

Change the fillArea() function into the code below:

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

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

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

添加了CSS:

path.area { 
  stroke: lightgreen;
  fill: #e6ffe6;
  opacity: 0.9   }

正在工作的小提琴:在行之间填充c3.js

但是，如果X轴是时间序列，则xscale(此处应为日期对象而不是字符串).这是一个时间序列示例:时间序列C3.js在行之间填充

However if the X axis is a timeseries, the xscale(here should be a date object instead of the string). Here is an timeseries example: Timeseries C3.js fill between lines

这篇关于C3.js填充曲线之间的区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！