75273


横軸に連続量を扱いたいです

本当は扱いたいのは日付ではないんですが表示間隔を自由に変更できるのが  
タイムスケールしかなさそうなので  
timestamp の秒数にキャストして表示だけいじれば何とでもなるかなと思い、  
とりあえず Time スケールを表示させようとしました

[code]

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <canvas id="myChart" width="640" height="480"></canvas>
    <script>
    
    var title = 'test';
    var labels = [
    new Date('2021-04-01'),
    new Date('2021-04-02'),
    new Date('2021-04-03'),
    new Date('2021-04-04'),
    new Date('2021-04-05'),
    new Date('2021-04-06'),
    new Date('2021-04-07'),
    new Date('2021-04-08'),
    new Date('2021-04-09'), 
    ];
    var datasets = [
    {
        label: 'item1',
        data: [1,2,3,4,5,6,7,8,9],
        borderColor: '#ff8888',
    },
    {
        label: 'item2',
        data: [2,3,4,5,6,7,8,9,10],
        borderColor: '#88ccff',
    }
    ];
    
    const config = {
      type: 'line',
      data: {
        labels: labels,
        datasets: datasets
      },
      options: {
        plugins: {
          title: {
            display: true,
            text: title
          },
        },
        responsive: true,
        scales: {
          x: {
            // type: 'time',
            title: {
              display: true,
              text: 'Date'
            }
          },
        }
      }
    };
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, config);
    </script>
[/code]

label に Date 型のデータを入れて

[code]

       scales: {
          x: {
            type: 'time'
          }
       }
    
[/code]

にするだけだと思ったんですが  
`Uncaught Error: This method is not implemented: either no adapter can be
found or an incomplete integration was provided`  
というようなエラーがライブラリ内ででて表示されません

(スニペットの type: 'time' のコメントアウトを外せば再現できます)

<https://www.chartjs.org/docs/latest/samples/scales/time-line.html>  
公式のサンプルコードには

[code]

     labels: [ // Date Objects
        Utils.newDate(0),
        Utils.newDate(1),
        Utils.newDate(2),
        Utils.newDate(3),
        Utils.newDate(4),
        Utils.newDate(5),
        Utils.newDate(6)
      ],
    
[/code]

みたいになってるんですが CDN でリンクしただけだと Utils というのが見つからないとわれてしまいます  
Date Objects とかいてるんですが Utils で作ったオブジェクトとネイティブの Date ではないんでしょうか  
Utils というクラスはどうやって使うのでしょうか


CC BY-SA 4.0
2021-04-14T08:37:11.083
75271
2021-04-14T17:30:34.323
question
javascript chart.js
chart.js で TimeScale の使い方


> `Uncaught Error: This method is not implemented: either no adapter can be
> found or an incomplete integration was provided`  
>  というようなエラーがライブラリ内ででて表示されません

Chart.js 3.xのマイグレーションガイドに記載がありますが、momentに直接依存していたコードが外れたので、adapterが必要になりました。  
(自分の好きな日付ライブラリと組み合わせられるようになりました)

<https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#setup-
and-installation>

> `moment` is no longer specified as an npm dependency. If you are using the
> `time` or `timeseries` scales, you must include one of [the available
> adapters](https://github.com/chartjs/awesome#adapters) and corresponding
> date library. You no longer need to exclude moment from your build.

例えば従来通りmomentを使用する場合は、以下の様にscriptタグを追加する必要があります。

<https://github.com/chartjs/chartjs-adapter-moment#cdn>

[code]

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.1.0"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
    
    <canvas id="myChart" width="640" height="480"></canvas>
    <script>
    
    var title = 'test';
    var labels = [
    new Date('2021-04-01'),
    new Date('2021-04-02'),
    new Date('2021-04-03'),
    new Date('2021-04-04'),
    new Date('2021-04-05'),
    new Date('2021-04-06'),
    new Date('2021-04-07'),
    new Date('2021-04-08'),
    new Date('2021-04-09'), 
    ];
    var datasets = [
    {
        label: 'item1',
        data: [1,2,3,4,5,6,7,8,9],
        borderColor: '#ff8888',
    },
    {
        label: 'item2',
        data: [2,3,4,5,6,7,8,9,10],
        borderColor: '#88ccff',
    }
    ];
    
    const config = {
      type: 'line',
      data: {
        labels: labels,
        datasets: datasets
      },
      options: {
        plugins: {
          title: {
            display: true,
            text: title
          },
        },
        responsive: true,
        scales: {
          x: {
            type: 'time',
            title: {
              display: true,
              text: 'Date'
            }
          },
        }
      }
    };
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, config);
    </script>
[/code]

* * *

> Utils というクラスはどうやって使うのでしょうか

Chart.jsのサイトはVuePress(<https://vuepress.vuejs.org/>)を使って生成されています。

`Utils`はその生成されたサイトのサンプルコードで使われる為のutil関数群なので、基本的に外部から利用する方法はないと思います。

<https://github.com/chartjs/Chart.js/blob/v3.1.0/docs/.vuepress/config.js#L106>

<https://github.com/chartjs/Chart.js/blob/v3.1.0/docs/scripts/utils.js>

全く同じ処理を行いたい場合は、上記の`utils.js`内で書かれている処理と全く同じことをすれば(全く同じコードを書けば)できるとは思います。

※日付ライブラリとしてLuxon(<https://moment.github.io/luxon/>)を使用しているようです。


CC BY-SA 4.0
2021-04-14T11:33:51.937
75273
2021-04-14T17:30:34.323
2021-04-14T17:30:34.323
3068
3068
75271
answer