chart.js で、グラフの軸の間隔を、値の間隔に応じて変更させたい

Question

##chart.jsを用いて、グラフを作成しています。
csvファイルから、セルの値を読み取り、chart.jsを用いてグラフにプロットしています。任意のラベルに対して、二つのグラフをそれぞれ描画することに成功しました。

##二つのデータの相関を知りたい。（応力ひずみ線図を作りたい！）
現在、横軸に月の名前、縦軸を数字として、csvファイルを一列ごとにプロットしています。これを、データの解析のために、横軸を2行目、縦軸を3行目のグラフを作りたいと考えています。

しかし、横軸のラベルを、数字に変えても、次の画像のように、横軸のグリッドの間隔が一定です。
（数字と数字の間隔が２の場所と、１の場所でグリッドの間隔が変化してほしい！）

##教えてください
どのようにすれば、chart.jsの横軸も、縦軸のように値によって間隔が変化しますか？
わかる方、ぜひ教えてください！

Answer 1

横軸を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,
}]

ご参考になさってください :)

Comments

[tomomari]

gh640様
ご丁寧にありがとうございます！

散布図を使う発送がありませんでした、まさに目から鱗です！
早速、散布図もプロットしてみて、データ分析のために適してるか、検証したいと思います！

ありがとうございました。

[gh640]

早々にご返信くださりありがとうございます。はい、一度お試しになってみてください :D