Chart.jsで境界線のスタイルをカスタマイズする方法

debugcn 投稿 Dev

ビートルジュース

Chart.js 2.2.1

デフォルトでは、バーとポイントの境界は実線です。可能であれば、境界線を点線または破線にして、特定のバーや線に注意を向けたいと思います。

ドキュメントを調べても、何も役に立ちませんでした。以下は私がうまくいくと思ったものです

var ctx = document.getElementById("myChart");
var borderColors = ['red','blue','black']
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Black"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3],
            borderColor:borderColors,
            borderWidth:3,
            borderStyle:'dash'//has no effect
        }]
    }
});

ここではライブで実行されています。どうすれば境界線を破線にすることができますか？

編集：私の質問は2つの理由でこの同様の質問とは異なります

このソリューションでは、すべてのバーの境界線が破線に置き換えられますが、指摘したように、データセット内の特定のバーのみをスタイル設定したいと思います。
このソリューションは棒グラフ専用です（rectangle.draw関数をオーバーライドしますが、データセット内の特定のポイントのポイント境界線を（折れ線グラフで）破線にしたいことも述べました。

tektiv

複製のようにすべてのグラフと長方形を編集するのではなく、破線で表示する各バーに対してのみ編集する必要があります。

あなたは（コンソールを見ている場合console.log(myChart) は、オブジェクトの奥深くに行く勇気があるなら、あなたにたくさんの情報を提供）は、すべてのバーがでinstanciedされていることがわかります、データセットのx番目のバーであること。myChart.config.data.datasets[0]._meta[0].data[x]x

どこに行けばよいかがわかったので、 .draw() メソッドを編集できるようになりました。

これは、それを機能させるために使用できる簡単な関数です：

function dashedBorder(chart, dataset, data, dash) {

    // edit the .draw() function
    chart.config.data.datasets[dataset]._meta[0].data[data].draw = function() {
        chart.chart.ctx.setLineDash(dash);
        Chart.elements.Rectangle.prototype.draw.apply(this, arguments);

        // put the line style back to the default value
        chart.chart.ctx.setLineDash([1,0]);
    }
}

このjsFiddleで結果を確認できます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]