8

Chart.js を数か月間使用していますが、プログラミングが簡単で、Chart.js が提供するパワーが気に入っています。Chart.js から生成されたグラフに追加したいことの 1 つは、生成するグラフのスタイルを少し良くすることです。私たちが使用しているグラフのほとんどは棒グラフで、いくつかの折れ線グラフが挿入されています。

「スタイリング」という用語を使用するとき、私が実際に話しているのは、棒や線を少し見栄えよくすることです。具体的には、棒グラフと折れ線グラフの後ろにドロップ シャドウを追加したいと考えています。

私は多くの質問に目を通しましたが、探しているものが見つからないようです。また、Chart.js ファイルを変更してドロップ シャドウとぼかしを JavaScript に追加することで、自分自身でいくつかの実験を行いましたが、正しい場所に追加されていません。これらの変更を Chart.Element.extend 描画関数内に配置します。

ctx.shadowColor = '#000';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;

ctx.fill() の直前に配置すると、ほとんど必要なことが行われます。その結果、描画している棒グラフと折れ線グラフの両方でかなり見栄えの良いドロップ シャドウが表示されますが、x 軸と y 軸のラベルにもドロップ シャドウが表示され、見栄えがよくありません。ラベルではなく、棒と線だけにドロップ シャドウを付けたいと思います。

あなたが提供できるどんな助けも大歓迎です。私は JavaScript の経験がありませんが、スタック オーバーフローの皆さんの助けがなければできないようなかなりの量のコーディングを行うことができました。

4

3 に答える 3

11

折れ線グラフのドロップ シャドウの追加

これを行うために折れ線グラフの種類を拡張できます

プレビュー

ここに画像の説明を入力

脚本

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        var originalStroke = ctx.stroke;
        ctx.stroke = function () {
            ctx.save();
            ctx.shadowColor = '#000';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 8;
            ctx.shadowOffsetY = 8;
            originalStroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

その後

...
var myChart = new Chart(ctx).LineAlt(data, {
    datasetFill: false
});

フィドル - https://jsfiddle.net/7kbz1L4t/

于 2015-12-16T11:45:59.207 に答える