css - C3.js で行が破線で表示される

Question

2 つの Y 軸を使用して C3.js を使用しています。私は2つのデータシリーズを持っています:

data: {
        rows: [
        ['data1', 'data2', 'data3'],
        [90, 120, 300],
        [40, 160, 240],
        [50, 200, 290],
        [120, null, 230],
        [80, null, 300],
        [90, null, 320],
    ],
        regions: {
            'data1': [{'start':0, 'style':'dashed'},],
        }
    }

これを実行すると、破線が表示され、null が x 軸に沿った破線としてグラフ化されます。これは私が望むものではありません。データセットが null の場合にグラフを停止したい。領域を削除すると、必要な機能が得られますが、破線は得られません。

null 値をグラフ化せずに破線を取得する方法はありますか?

Answer 1

C3 は SVG を使用するため、CSS セレクターを使用して要素の外観を変更できます。

C3 チャートのすべての線は .c3-line クラスを持ちます。

したがって、これを CSS に追加するだけです。

.c3-line{
  stroke-dasharray: 5,5;
}

stroke-dasharrayのドキュメントを次に示します。