Y軸目盛の天地を反転する yScaleOrder

• ランキング等のデータでチャート上部に行くほどい小さい数値に描画したい場合などに利用できます。
• 現状使えるタイプは line のみ。
• Y軸目盛の天地を反転し、データの降順・昇順を指定するプロパティです。
• デフォルトは 降順'DESC'。昇順は'ASC'。

"yScaleOrder": "ASC" * 上部に行くほどい小さい数値

var chartdata0 = {

  "config": {
    "title": "\"yScaleOrder\": \"ASC\"",
    "type": "line",
    "useVal": "yes",
    "axisXLen": 5,//水平目盛り線の本数
    "maxY": 10,
    //"minY": 1,
    "yScaleColor": "gold", //垂直軸目盛りの文字色
    "yScaleFont": "15px Arial"//, //フォント
    "yScaleOrder": "ASC"//Y軸の天地を反転する。省略すると 降順'DESC'
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["かめ",3,4,5,4,7,8,8],
    ["コアラ",4,3,3,5,3,7,8],
    ["かえる",2,2,4,3,5,5,6],
    ["うさぎ",1,1,1,2,4,9,9]
  ]
};

ccchart.init('hoge0', chartdata0);

"yScaleOrder": "DESC" * 上部に行くほどい大きい数値

var chartdata1 = {

  "config": {
    "title": "\"yScaleOrder\": \"DESC\"",
    "type": "line",
    "useVal": "yes",
    "axisXLen": 10,//水平目盛り線の本数
    "maxY": 11,
   // "minY": 1,
    "yScaleColor": "gold", //垂直軸目盛りの文字色
    "yScaleFont": "15px Arial", //フォント
    "yScaleOrder": "DESC",//Y軸の天地を反転する。省略すると 降順'DESC'
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["かめ",3,4,5,4,7,8,8],
    ["コアラ",4,3,3,5,3,7,8],
    ["かえる",2,2,4,3,5,5,6],
    ["うさぎ",1,1,1,2,4,9,9]
  ]
};
ccchart.init('hoge1', chartdata1);

クリックで ASC/DESC を切り替えてみる

ASC DESC

<canvas id="hoge3"></canvas>
<button onclick="
  chartdata3.config.yScaleOrder = 'ASC';
  ccchart.init('hoge3', chartdata3);
  ">ASC</button>
<button onclick="
  chartdata3.config.yScaleOrder = 'DESC';
  ccchart.init('hoge3', chartdata3);
  ">DESC</button>
<script>
var chartdata1 = {

  "config": {
    "title": "\"yScaleOrder\": \"ASC\"",
    "type": "line",
    "useVal": "yes",
    "axisXLen": 10,//水平目盛り線の本数
    "maxY": 11,
    "minY": 1,
    "yScaleColor": "gold", //垂直軸目盛りの文字色
    "yScaleFont": "15px Arial", //フォント
    "yScaleOrder": "DESC",//Y軸の天地を反転する。省略すると 降順'DESC'
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["かめ",3,4,5,4,7,8,8],
    ["コアラ",4,3,3,5,3,7,8],
    ["かえる",2,2,4,3,5,5,6],
    ["うさぎ",1,1,1,2,4,9,9]
  ]
};
ccchart.init('hoge3', chartdata3);
<script>