Movable TypeのChart APIの使い方(オプションのまとめ)

Movable TypeのChart APIの使い方(オプションのまとめ)

Posted at April 14,2015 12:55 AM
Tag:[ChartAPI, MovableType]

Movable TypeのChart APIの使い方(オプションのまとめ)です。

この記事は「Movable TypeのChart APIの使い方(基本)」の続きです。

サンプルは上記の記事を使ってください。

ここでは動作確認できたオプションを紹介します。

type

グラフのタイプを設定します。

$(function(){
    …中略…
    var config = {
        type: 'morris.bar',
        data: [
            …中略…
        ]
    }
    new MT.ChartAPI.Graph(config, range).trigger('APPEND_TO', $('#graph'));
});

設定可能な値は下記です。

morris.bar
morris.bar

morris.line
morris.line

morris.area
morris.area

morris.donut
morris.donut

easel.bar
easel.bar

easel.motionLine
easel.motionLine

上記の他、以下のタイプも設定可能です。

easel.mix
css.horizontalBar
css.ratioHorizontalBar

yLength

Y軸に使用するデータ数を指定します。yLengthに「2」を設定した場合、dataに「y」「y1」が必要になります。

$(function(){
    …中略…
    var config = {
      yLength: 2,
      data: [
        {
          x: '2013-04',
          y: '123',
          y1: '456'
        },
        {
          x: '2013-05',
          y: '235',
          y1: '678'
        }
      ]
    }
    …中略…
});

表示例
yLength

すべてのデータに「y」と「y1」が揃っていないと期待する表示になりません。

yLengthを「3」にすれば「y」「y1」「y2」が必要です。

autoResize

「true」を設定すれば、ウィンドウのリサイズにあわせて再描画します。

$(function(){
    …中略…
    var config = {
        autoResize: true,
        …中略…
    }
    …中略…
});

ただし表示領域にwidthプロパティが設定されていると再描画されません。

chartColors

グラフの色を指定します。

$(function(){
    …中略…
    var config = {
        chartColors: '#ffbe00',
        …中略…
    }
    …中略…
});

表示例
yLength

width

グラフの幅を指定します。値には数値のみを設定します。設定しない場合のデフォルト値は300pxです。

$(function(){
    …中略…
    var config = {
        width: '500',
        …中略…
    }
    …中略…
});

widthを指定した場合、autoResizeは無効になります。

height

グラフの高さを指定します。値には数値のみを設定します。設定しない場合のデフォルト値は300pxです。

$(function(){
    …中略…
    var config = {
        height: '200',
        …中略…
    }
    …中略…
});

以上です。

上記の他、下記の公式サイトに色々なオプションが掲載されているので試してみてください。

Configuration parameters graph

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)