メニューを閉じる

テクノデジタルグループ

メニューを開く

2022.08.31

プログラミング

Chart.js/3.8.0にてオプション指定時の軸名称の明示記載について

概要

Chart.jsにてグラフを作成する際、
オプションを指定して軸の設定を行おうした所、
反映されなかったので原因と対策内容を記載致します。

使用version:https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js

修正前コード

var test= document.getElementById('test');
var chart = new Chart(test, {
        type: 'line',
        data: {
            labels: test,
            datasets: [{
                label: 'test',
                data: [20, 10],
                ~~ 省略 ~~
            }]
        },
        options: {
             scales: {
                yAxes: {
                    ticks: {
                        display: false,
                    }
                }
            }
        },
    });

修正後コード

var test= document.getElementById('test');
var chart = new Chart(test, {
        type: 'line',
        data: {
            labels: test,
            datasets: [{
                label: 'test',
                xAxisID: 'x',
                yAxisID: 'y', 
                data: [20, 10],
                ~~ 省略 ~~
            }]
        },
        options: {
             scales: {
                y: {
                    ticks: {
                        display: false,
                    }
                }
            }
        },
    });

原因と対策

◆原因
変更前後ともに「option」内での軸名称ID記述は有りますが
変更前には「datasets」内での軸名称ID記述が無かった。

◆対策
Chart.js/3.8.0 では軸名称ID(xAxisID)の指定は明示的に設定記載する必要が有ります。
・「datasets」内にて軸名称IDを記載
・「options.scales」 にて軸名称IDを指定


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事