C3js区域范围图表

时间:2015-05-05 00:00:28

标签: d3.js c3.js c3

是否可以在C3.js中创建类似于Highcharts的区域范围图表?我已附上截图并链接到实时示例http://www.highcharts.com/demo/arearange-lineenter image description here

这个想法是显示范围数据,可能是历史的高值和低值,然后用折线图覆盖当前年份的值。 C3能做到吗?

提前致谢!

1 个答案:

答案 0 :(得分:5)

我认为没有区域范围图表选项,但您可能会这样伪造它:

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 300, 350, 300, 290, 225, 220],
            ['data2', 250, 320, 280, 250, 170, 180],
            ['data3', 230, 300, 240, 200, 150, 150]
        ],
        types: {
            data1: 'area',
            data2: 'line',
            data3: 'area'
        },
        colors: {
            data1: 'rgb(215, 232, 248)',
            data2: 'rgb(120, 178, 235)',
            data3: '#ffffff'
        }
    },
    point: {
        r: 1
    }
});

使用css:

.c3-area {
    opacity:1;
}

这是一个小提琴: http://jsfiddle.net/ot19Lyt8/17/