C3js 区域范围图答案

【问题标题】：C3js Area Range chartC3js 区域范围图
【发布时间】：2015-05-05 00:00:27
【问题描述】：

是否可以在 C3.js 中创建类似于 Highcharts 的区域范围图？我附上了截图和链接到现场样本http://www.highcharts.com/demo/arearange-line.

这个想法是显示范围数据，也许是历史最高值和最低值，然后用折线图覆盖当年的值。 C3能做到吗？

提前致谢！

【问题讨论】：

我认为目前这个问题的答案是“否”。下面的答案只适用于单个数据通道。如果你想绘制多个数据通道，这是行不通的。

标签： d3.js c3.js c3

【解决方案1】：

我认为没有区域范围图选项，但您可以像这样伪造它：

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/

【讨论】：

好的，我想了这么多：/我想你的解决方法唯一不太正确的是你不能有比例线，因为它们会被“data3 “ 系列。但这是个好主意，感谢您的回复。
如果您愿意深入研究 D3 代码，可以将网格线放在前面，如下所示：jsfiddle.net/ot19Lyt8/22
略微改进以显示在线气泡：jsfiddle.net/ot19Lyt8/23
你有什么想法可以为负值做这个吗？
@ChrisWilliams 似乎可以很好地处理负数：jsfiddle.net/ot19Lyt8/31