Chart JS V2.0 Scatter chart base

目的

散布図の書き方のベースを作成する。

結果

概要

Charjs で line chart を指定して、データは x,y データを保持したオブジェクトの配列、[{x: n, y, m}, ...] を指定する。ただし、options.scales.xAxes を指定し忘れると散布図にならないので注意する。

サンプル概要

２つのデータセットをJavascript のランダム値を使って自動で生成している。そのためブラウザでリロードするたびにグラフは変化する。

データ

genData() で [{x:..,y:..},...] のデータを生成できる。 サンプルではそのデータを２組利用している。

また、異なるプロット表示にするため、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'
        }]
    },

全体

gistdc1329a83e31d8ef2c7f724ffbc6a1a7