1

C3棒グラフでデータを表す必要があります。問題は、データセットには通常、1 つまたは 2 つの非常に大きな値と、他のはるかに小さな値 (比較して小さい) が含まれていることです。これにより、ほとんど見えない棒の隣に非常に高い棒ができます。このようなスケール ブレークを使用すると、問題を解決できることはわかっています。C3しかし、それについて言及している例は1つも見つかりませんでした。スケール ブレークを作成する方法はありますか? そうでないC3 charts?場合、それを行うための代替のオープン ソースJSライブラリはありますか?

4

1 に答える 1

2

分割ドメインを持つ d3 線形スケールを使用して、値とスケールを変換できます。

次に、複数のグリッド線を使用して分割を描画します

HTML

<div id="chart"></div>

脚本

var myScale = d3.scale.linear().domain([0, 10, 90, 100]).range([0, 40, 60, 100]);

var chart = c3.generate({
    data: {
        columns: [
            ['A', 3, 2, 1, 4, 1.5, 92.5, 93, 91, 94].map(function (value, index) {
                return index ? myScale(value) : value;
            })],
        type: 'bar'
    },
    tooltip: {
        format: {
            value: function (value) {
                return parseFloat(myScale.invert(value).toFixed(5));
            }
        }
    },
    axis: {
        y: {
            min: 0,
            max: 100,
            padding: {
                top: 0,
                bottom: 0
            },
            tick: {
                format: function (d) {
                    if (d > myScale.range()[1] && d < myScale.range()[2]) return null
                    else return myScale.invert(d)
                }
            }
        }
    },
    grid: {
        y: {
            lines: [{ value: (myScale.range()[1] + myScale.range()[2]) / 2, class: 'breakFill' }, 
                    {value: (myScale.range()[1] + myScale.range()[2]) / 2 + 1, class: 'break' }, 
                    {value: (myScale.range()[1] + myScale.range()[2]) / 2 - 1, class: 'break' }]
        }
    }
});

リージョン レイヤーはバー レイヤーの下にある (グリッド レイヤーはバー レイヤーの上にある) ため、リージョンではなくグリッド ラインを使用する必要があります。

CSS

これは、(太い) 塗りつぶし線と 2 つの境界線で構成されます

.breakFill > line {
    stroke-width: 4px;
    stroke: white;
    stroke-opacity: 1;
}
.break > line {
    stroke-width: 1px;
    stroke: grey;
}

また、波線のパターンを使用してより適切にスタイルを設定したり、波線の背景を持つ HTML 要素を配置したりすることもできます。

フィドル - http://jsfiddle.net/tdfpj3oc/

于 2015-06-17T12:55:21.077 に答える