2017-04-03 22 views
0

Chartist.jsを使用して折れ線グラフをレンダリングしています。特定の垂直グリッドの色を変更しようとしていますが、プラグインでこれを行う方法が見つかりませんでした。チャーティストチャートの特定のグリッドラインの色を変更する方法

画像に見られるように、私は2番目と9番目の垂直グリッド線を暗くしたいと思います。

enter image description here

は私が何とかドローイベントでこれを行うには考えていますが、わからない(第二と第九はちょうど例えば、私はグリッドのインデックスは、バックエンドから動的に強調表示されるようになってます。です)これを行う方法。

chart.on('draw', function (data) { 
    if (data.type === 'grid') { 

    } 
}); 

答えて

1

これを行う最も簡単な方法は、CSSによるものです。このような何かが動作します:

.ct-grid.ct-horizontal:nth-of-type(2), .ct-grid.ct-horizontal:nth-of-type(9) { stroke-width: 3; stroke-dasharray: 10px 5px; }

を明らかにあなたが親クラスを追加することができますし、あなたがオンとオフこれらの厚いグリッド線をオンにする必要があるならば、単に親要素でこれを切り替えます。

NOTE - やや驚くほど、chartist.jsは垂直グリッド線、およびその逆にクラスct-horizontalを追加しているようだ...

は、参考のために、このフィドルを参照してください:http://jsfiddle.net/whf5h1yu/2/

+0

はうまく機能しますが、やりますあなたはct-verticalでうまくいかない理由を知っていますか?ありがとう! – JohnG

関連する問題