Visualizerをデバックする

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

• REST API LimitのPostman Visualizerを解析します

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

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

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

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

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

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

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

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"
}

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

const myChart = new chart(ctx, {

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

// 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);