Chart JS V2.0 Scatter chart base
目的
散布図の書き方のベースを作成する。
結果
概要
Charjs で line chart を指定して、データは x,y データを保持したオブジェクトの配列、[{x: n, y, m}, ...] を指定する。ただし、options.scales.xAxes を指定し忘れると散布図にならないので注意する。
サンプル概要
2つのデータセットをJavascript のランダム値を使って自動で生成している。そのためブラウザでリロードするたびにグラフは変化する。
データ
genData() で [{x:..,y:..},...] のデータを生成できる。 サンプルではそのデータを2組利用している。
また、異なるプロット表示にするため、pointStyle を使って、"1st Data" は 'star' に指定している。
data: { datasets: [ { label: "1st Data", data: firstData , pointStyle: 'star', pointRadius: 5, pointBorderRadius: 5, borderColor: '#000', showLine: false },
xAxes
オプション指定が無いと散布図にならない。
options: { scales: { xAxes:[{ type: 'linear', position: 'bottom' }] },