n-HIROKIの日常

n-HIROKIの取り組みを記録したものです。

Canvas.js パラメーターのメモ

こんにちは、n-hirokiです!

今回はCanvas.jsのパラメーターのメモです。
基本的なグラフはこれらのパラメーターを使えれば十分です。

Canvas.jsのパラメータ

・グラフ描画をアニメーション化
animationEnabled

・アニメーション時間
animationDuration

・グラフ上部に記述されるタイトル
title

・タイトル下のサブタイトル
subtitles


・グラフの幅(指定しないと100%になる)
width


・グラフの高さ
height

・棒グラフの幅
dataPointMaxWidth

・横項目の設定
axisX

・縦項目の設定
axisY

・棒グラフにカーソルを乗せた時に表示されるバルーン
toolTip

・グラフを生成する上で必要な値の設定
data

・グラフの種類
type

・グラフの色
color

・グラフにカーソルを乗せるとポインターになるようにする
cursor


Canvas.jsの記述例

  data:[{
      type:"stackedColumn",
      color:'#B0D0B0',
      name:"テスト",
      legendText:"テスト",
      showInLegend:true,
      cursor:"pointer",
      dataPoints:[
        {label:"2018/1", y:200},
        {label:"2018/2",y:250},
        {label:"2018/3",y:270},
        {label:"2018/4",y:150},
        {label:"2018/5",y:300},
      ]
    }

注意:Canvas.jsは商用利用は有償です。