WEB開発

【ChartJs v3.9~】RadarCharのグラフ内部を塗りつぶしたい

ChartJsのレーダーチャートを使っているときに表の内部を塗りつぶしたいなと思いましたが、CharJsのアップデートの関係で検索しても方法が見つからなかったので最新の方法を紹介します。

Chart.register({
    id: 'custom_canvas_background_color',
    beforeDraw: (chart, args, options) => {
        const {
            ctx,
            chartArea: { top, right, bottom, left, width, height },
            scales: { x, y },
        } = chart;
        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
            var scale = chart.scales.r;
            var ticksNum = scale._pointLabels.length;
            var max = scale.max;
            for (var i = 0; i < ticksNum; i++) {
                var point = scale.getPointPositionForValue(i, max);
                if (i === 0) {
                    ctx.moveTo(point.x, point.y);
                } else {
                    ctx.lineTo(point.x, point.y);
                }
            }

            ctx.fill();
            ctx.restore();
        }
    },
});

色を指定する方法

色を指定するためにはconfigのoptionsに設定を記載してください。以下一例です。

options: {             
    chartArea: {
　　　　　　backgroundColor: 'rgba(100,100,100,1)' // <== ここに好きな色を指定
　　},
    //... 中略 ...
},
出力結果

色を付ける範囲を変えたい

需要があるかわかりませんが、たとえばレーダーチャートの半分の位置までに色を付けたい場合はこうします。

Chart.register({
    id: 'custom_canvas_background_color',
    beforeDraw: (chart, args, options) => {
        const {
            ctx,
            chartArea: { top, right, bottom, left, width, height },
            scales: { x, y },
        } = chart;
        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {

            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
            var scale = chart.scales.r;
            var ticksAsNumbers = scale.ticks.length;
            var max = scale.max / 2; // <== ここを変更！　今はmax（つまり背景全体) これを半分にすると？
            for (var i = 0; i < 5; i++) {
                var point = scale.getPointPositionForValue(i, max);
                if (i === 0) {
                    ctx.moveTo(point.x, point.y);
                } else {
                    ctx.lineTo(point.x, point.y);
                }
            }

            ctx.fill();
            ctx.restore();
        }
    },
});
こんな感じ

塗りつぶし位置を変える使い道

例えば5教科のうち30点以下の部分を赤色で塗りつぶしたいときはこれが使えます。

ネットにある情報で以下のエラーが出たら当サイトがいいかも

  • Cannot read properties of undefined getPointPositionForValue
  • getPointPositionForValue is not a function

-WEB開発
-