d3.js - C3jsエリア範囲チャート

Question

Highcharts と同様に、C3.js で Area range chart を作成することは可能ですか? スクリーンショットとライブ サンプルhttp://www.highcharts.com/demo/arearange-lineへのリンクを添付しました。

アイデアは、範囲データ (おそらく過去の高値と安値) を表示してから、今年の値を折れ線グラフでオーバーレイすることです。C3はこれを行うことができますか？

前もって感謝します！

Answer 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/