chart.js 4.2で時系列のグラフを書く（日付を扱うアダプタを指定必要）

chart.js 4系で、ポンと動くサンプルがWEB上に無かったので上げておきます。
chart.jsがバンドル版じゃない場合に、日付を扱うアダプタをちゃんと入れておかないと動かないサンプルプログラムが多いようです。（そんなの当たり前だろう、という事なのかもしれませんが、chart.js2系はmoment　がデフォルトで入っているからポンと動くでの違いとして。）

日付のアダプタは下記から選べます。

https://github.com/chartjs/awesome#adapters

上記ページからリンクしたらgithubページに各アダプタのCDNのURLがあります。
moment　が推奨されてないという情報が増えているので、サンプルプログラムでは、date-fnsにしています。
（アダプタ使わずに Dataオブジェクト指定、フォーマットは自前でやるなど、javascriptネイティブで動作させる、という方法もありそうですが、、詳細調査未。）

※ソースは、とりあえず動く適当なものです。

<<span class='wp_keywordlink'><a href="https://blog.cybercube.co.jp/category/html%E3%83%BBcss" title="html">html</a></span>>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<!-- アダプタ -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<!-- グラフ描画エリア -->
<canvas id="myChart" ></canvas>
<!-- 以下、スクリプト -->
<script>

var ctx = document.getElementById('myChart');

    var values =[
        {x:"2020-02-01",y:100},
       {x:"2020-02-02",y:200},
       {x:"2020-02-03",y:300},
       {x:"2020-02-4",y:400},
       {x:"2020-02-07",y:200},
       {x:"2020-02-14",y:600}
];

    var dlg_goods_detail_chart1 = new Chart(ctx, {
        type: "line",
        data: {
          datasets: [{
            label: "値1",
            fill: false,
            borderColor: 'rgba(0, 0, 255, 0.5)',
            lineTension: 0.1,   //曲線にする度合
            data: values,
          }],
        },
        options: {
          spanGaps: true,   //点をつなげる場合
          scales: {
            x: {
              type: 'time',
              time:{
                unit: 'week',    //週に線
                displayFormats: {
                    week: 'yyyy-MM-dd'
                }
              },

            }
          }
        }
      });

</script>
</body>
</<span class='wp_keywordlink'><a href="https://blog.cybercube.co.jp/category/html%E3%83%BBcss" title="html">html</a></span>>

<html>

<head>

</head>

<body>

var ctx = document.getElementById('myChart');

var values =[

{x:"2020-02-01",y:100},

{x:"2020-02-02",y:200},

{x:"2020-02-03",y:300},

{x:"2020-02-4",y:400},

{x:"2020-02-07",y:200},

{x:"2020-02-14",y:600}

];

var dlg_goods_detail_chart1 = new Chart(ctx, {

type: "line",

data: {

datasets: [{

label: "値1",

fill: false,

borderColor: 'rgba(0, 0, 255, 0.5)',

lineTension: 0.1, //曲線にする度合

data: values,

}],

options: {

spanGaps: true, //点をつなげる場合

scales: {

x: {

type: 'time',

time:{

unit: 'week', //週に線

displayFormats: {

week: 'yyyy-MM-dd'

}

});

</script>

</body>

</html>

サイバーキューブ開発メモ

ホームページ作成・システム開発メモ。

chart.js 4.2で時系列のグラフを書く（日付を扱うアダプタを指定必要）

関連記事: