質問: chart.jsを用いて、グラフを作成しています。 ------------------------- csvファイルから、セルの値を読み取り、chart.jsを用いてグラフにプロットしています。任意のラベルに対して、二つのグラフをそれぞれ描画することに成功しました。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/0b02d7bd562bf69a1bfb8357a66bf662.png) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/16dadf58d5f299394b92a31e7893d673.png) 二つのデータの相関を知りたい。(応力ひずみ線図を作りたい!) ------------------------------ 現在、横軸に月の名前、縦軸を数字として、csvファイルを一列ごとにプロットしています。これを、データの解析のために、横軸を2行目、縦軸を3行目のグラフを作りたいと考えています。 しかし、横軸のラベルを、数字に変えても、次の画像のように、横軸のグリッドの間隔が一定です。 (数字と数字の間隔が2の場所と、1の場所でグリッドの間隔が変化してほしい!) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/5f3d3c39564c94b55afa2367cc82f223.png) 教えてください ------- どのようにすれば、chart.jsの横軸も、縦軸のように値によって間隔が変化しますか? わかる方、ぜひ教えてください!
回答: > > 横軸を2行目、縦軸を3行目のグラフを作りたいと考えています。 > > > これを「 2 列目の値を横軸に、 3 列目の値を縦軸に取ったグラフを作りたい」という意味だと解釈して、以下回答させていただきます(この理解が間違っていればご指摘ください)。 「散布図」というのはご存知ですか? 2 つの系列の相関を表すときに使うもので、英語では scatter chart と言います。描かれたい図はおそらく散布図ではないかと思います。 という私の認識が正しければ、 Chart.js には scatter chart を描く機能が用意されているのでそれをお使いになるとよいと思います。 * Scatter · Chart.js documentation * javascript - Display line chart with connected dots using chartJS - Stack Overflow すでに折れ線グラフの描画は達成されているとのことなので、私が改めてご説明しなくても上のページをご覧いただければ課題解決に至られるのではないかと思いますが、いかがでしょうか。 Chart.js の scatter chart は通常点の間に線を引かないので、線を引かれたい場合は対象の dataset にオプションを指定されるとよいかと思います。 line chart と同じオプションが使えるようです: * Dataset Properties - Line · Chart.js documentation 例えば次のようにするとよいでしょうか。 ``` datasets: [{ label: '応力とひずみの相関', data: [ // ... ], borderWidth: 5, showLine: true, fill: false, lineTension: false, }] ``` ご参考になさってください :)