Chart.js <Chart.js<Javascript<木暮仁

スタートページJavascriptChart.js

Chart.js 上書きプラグイン(対象:全チャート)


上書きプラグイン

作成したチャートの任意の場所に、任意の文字列や画像などを上書きしたいことがあります。それには、プラグインを作成するのが最も簡単です。生のcanvas命令に関する知識だけで記述できますが、汎用性が全然なくあまりにも姑息な方法ですので、最後の手段とすべきでしょう。

var 上書きプラグイン = { // 単なる変数名なので任意
    afterDatasetsDraw: function(chart) {
        var ctx = chart.ctx;
           : ここに任意のcanvas命令を記述
    }
}

プラグインA


試行錯誤で円の中心座標 (150, 175) を探し、
     ctx.textAlign = "center";
     ctx.strokeText("質問A", 150, 175);
として表示した。

プラグインB

options: {
    :
    layout: {
        padding: {
            bottom: 50
        }
    }
として、見えないエリアを確保して、上書きプラグインBで
    ctx.strokeText("時間的推移", 150, 270);
    ctx.strokeText("出典 //http:www.kogures.com/", 150, 285);
を上書きした。


他のプラグインなどと組み合わせると、右図のように、かなり実用的なグラフを作ることができます。