水平軸目盛の傾き xScaleRotate

• 列項目の数が多いと水平軸目盛りの文字が重なってしまうことがあり、水平軸目盛を回転させた方が見やすくなる場合があるので実装してみました。
• なお、水平軸目盛を傾けるとチャートの下パディングpaddingBottomが足りなくなる場合があるのでそれも調整すること。また、xScaleAlignのデフォルトがcenterなので、right(しりぞろえ)にせずにフォントサイズを大きくするとチャート領域下辺からの距離xScaleYOffsetを調整する必要もあるかも。

水平軸目盛の傾き "xScaleRotate": -45 右肩上がり

var chartdata0 = {

  "config": {
    "title": "水平軸目盛の傾き \"xScaleRotate\": -45",
    "type": "bar",
    "xScaleColor": "gold", //水平軸目盛りの文字色
    "xScaleFont": "18px Arial", //フォント
    "xScaleRotate": -45, //角度 (0で水平、-45で右肩上がり、-90で直角)
    "xScaleYOffset": 28, //チャート領域との間隔
    "paddingBottom": 65 //チャートの下パディング。水平軸目盛りの縦幅
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["紅茶",335,352,527,448,775,835,979],
    ["コーヒー",400,385,436,373,357,688,800],
    ["ジュース",160,252,588,252,567,502,660],
    ["ウーロン",100,183,352,120,302,400,1112]
  ]
};

水平軸目盛の傾き "xScaleRotate": -90 直角

var chartdata1 = {

  "config": {
    "title": "水平軸目盛の傾き \"xScaleRotate\": -90",
    "type": "line",
    "xScaleColor": "#fff", //水平軸目盛りの文字色
    "xScaleFont": "18px Arial", //フォント
    "xScaleRotate": -90, //角度 (0で水平、-45で右肩上がり、-90で直角)
    "xScaleAlign": "right", //align デフォルトは "center"。 "right"でしりぞろえ
    "xScaleYOffset": 8, //チャート領域との間隔
    "paddingBottom": 70 //チャートの下パディング。水平軸目盛りの縦幅
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["紅茶",335,352,527,448,775,835,979],
    ["コーヒー",400,385,436,373,357,688,800],
    ["ジュース",160,252,588,252,567,502,660],
    ["ウーロン",100,183,352,120,302,400,1112]
  ]
};

水平軸目盛の傾き "xScaleRotaten": 0。これは省略した場合と同じ。

var chartdata2 = {

  "config": {
    "title": "水平軸目盛の傾き \"xScaleRotate\": 0",
    "type": "bezi2",
    "xScaleColor": "#fff", //水平軸目盛りの文字色
    "xScaleFont": "12px Arial", //フォント
    "xScaleRotate": 0, //角度 (0で水平、-45で右肩上がり、-90で直角)
    "paddingBottom": 50 //チャートの下パディング。水平軸目盛りの縦幅
  },

  "data": [
    ["年度",2007,2008,2009,2010,2011,2012,2013],
    ["紅茶",335,352,527,448,775,835,979],
    ["コーヒー",400,385,436,373,357,688,800],
    ["ジュース",160,252,588,252,567,502,660],
    ["ウーロン",100,183,352,120,302,400,1112]
  ]
};