Visualizerをデバックする


以下の続きです。どうやってもchart.jsの4系ではグラフが表示できません。


+ [REST API LimitのPostman Visualizerを解析します](https://qiita.com/Keiji_otsubo/items/9774e85edb2a1bcfe6db)

仕方ないので、Postmanのデスクトップ版をインストールしてデバック機能を使ってみます。Web版ではどうやってもデバックできませんでした...

エラーで何も表示されていないところで、右クリックするとデバックできるみたいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/152dc4ab-be4b-68b6-fabb-85aad4c865d5.png)

4系のバージョンは使えない感じですね。

:::note alert
Uncaught SyntaxError: Cannot use import statement outside a module　chart.min.js:13 
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/d1df5adc-42e6-bf7e-f73e-ad2bf3df60ae.png)

同じようなエラーが質問されていましたが、解決できてないですね。

https://github.com/chartjs/chartjs-adapter-date-fns/issues/70

type="module" を追加すると上記のエラーは消えましたねぇ。

```JavaScript
<script type="module" src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.min.js"></script>
```

https://flaviocopes.com/fix-cannot-use-import-outside-module/

Chart.js(4.4.1)の資料には以下のように書かれているんですが、ブラウザではどう設定するかが分からんかったです。 

Chart.js becomes an ESM-only package (the UMD bundle is still available). To use Chart.js, your project should also be an ES module. Make sure to have this in your package.json

Chart.js は ESM 専用パッケージになります (UMD バンドルは引き続き利用可能です)。 Chart.js を使用するには、プロジェクトも ES モジュールである必要があります。これを package.json に必ず含めてください。

```
{
  "type": "module"
}
 ```

 https://www.chartjs.org/docs/latest/migration/v4-migration.html

どうもchartがないってエラーですね。何故？大文字、小文字に変えてけど変わらずエラーです。

```JavaScript
const myChart = new chart(ctx, {
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/5775b7ce-7e09-5b5d-b2d7-ae4c1c420436.png)

色々触っていると表示された。

```JavaScript
// Visualizer that renders a Chart.js graph with the Salesforce API limits consumption
const template = 
`
<script type="module" src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<canvas id="myChart" width="400" height="800"></canvas>
<script>
pm.getData((err, chartData) => {
    const ctx = document.getElementById('myChart');
    const myChart = new Chart(ctx, {
        type: "line",
        data: {
          datasets: [{
            label: "値1",
            fill: false,
            borderColor: 'rgba(0, 0, 255, 0.5)',
            lineTension: 0.1,   //曲線にする度合
            data: chartData,
          }],
        },
        options: {
          spanGaps: true,   //点をつなげる場合
          scales: {
            x: {
              type: 'time',
              time:{
                unit: 'week',    //週に線
                displayFormats: {
                    week: 'yyyy-MM-dd'
                }
              },
 
            }
          }
        }
    });
});
</script>
`;

 var chartData =[
    {x:"2020-02-01",y:100},
    {x:"2020-02-02",y:200},
    {x:"2020-02-03",y:300},
    {x:"2020-02-04",y:400},
    {x:"2020-02-07",y:200},
    {x:"2020-02-14",y:600}
 ];
// Render vizualizer
pm.visualizer.set(template, chartData);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/f87f5064-6ba1-7ec4-9e0a-b0eac763895d.png)