お世話になります。
chart.jsを使って折れ線グラフを描画していますが、これを時計回りに90度回転させて描画したいと考えています。
サンプルにあるような以下のコードを回転させるにはどのパラメータを変更したらよいでしょうか。
実装したい形としては
折れ線グラフ
左上をX,Yの原点に
左上から右に向かってY軸
左上から下に向かってX軸(時間)
という形です。
2017/02/21 11:15追記・編集
書き方に沿っておらず申し訳ありません。
サンプルは以下のURLで紹介されている 折れ線グラフ2 の図です。
https://www.webtoolnavi.com/chart-js/
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5</head> 6<body> 7<canvas id="myLine2Chart" width="800" height="400"></canvas> 8<script type="text/javascript" src="Chart.js"></script> 9<script type="text/javascript">
javascript
1//折れ線グラフ2 2var ctx = document.getElementById("myLine2Chart"); 3var myLine2Chart = new Chart(ctx, { 4 //グラフの種類 5 type: 'line', 6 //データの設定 7 data: { 8 //データ項目のラベル 9 labels: ["1月", "2月", "3月", "4月", "5月", "6月"], 10 //データセット 11 datasets: [ 12 { 13 //凡例 14 label: "1年目", 15 //面の表示 16 fill: false, 17 //線のカーブ 18 lineTension: 0, 19 //背景色 20 backgroundColor: "rgba(179,181,198,0.2)", 21 //枠線の色 22 borderColor: "rgba(179,181,198,1)", 23 //結合点の枠線の色 24 pointBorderColor: "rgba(179,181,198,1)", 25 //結合点の背景色 26 pointBackgroundColor: "#fff", 27 //結合点のサイズ 28 pointRadius: 5, 29 //結合点のサイズ(ホバーしたとき) 30 pointHoverRadius: 8, 31 //結合点の背景色(ホバーしたとき) 32 pointHoverBackgroundColor: "rgba(179,181,198,1)", 33 //結合点の枠線の色(ホバーしたとき) 34 pointHoverBorderColor: "rgba(220,220,220,1)", 35 //結合点より外でマウスホバーを認識する範囲(ピクセル単位) 36 pointHitRadius: 15, 37 //グラフのデータ 38 data: [12, 19, 3, 5, 2, 3] 39 }, 40 { 41 //凡例 42 label: "2年目", 43 //面の表示 44 fill: false, 45 //線のカーブ 46 lineTension: 0, 47 //背景色 48 backgroundColor: "rgba(75,192,192,0.4)", 49 //枠線の色 50 borderColor: "rgba(75,192,192,1)", 51 //結合点の枠線の色 52 pointBorderColor: "rgba(75,192,192,1)", 53 //結合点の背景色 54 pointBackgroundColor: "#fff", 55 //結合点のサイズ 56 pointRadius: 5, 57 //結合点のサイズ(ホバーしたとき) 58 pointHoverRadius: 8, 59 //結合点の背景色(ホバーしたとき) 60 pointHoverBackgroundColor: "rgba(75,192,192,1)", 61 //結合点の枠線の色(ホバーしたとき) 62 pointHoverBorderColor: "rgba(220,220,220,1)", 63 //結合点より外でマウスホバーを認識する範囲(ピクセル単位) 64 pointHitRadius: 10, 65 //グラフのデータ 66 data: [15, 15, 6, 8, 5, 6] 67 } 68 ] 69 }, 70 //オプションの設定 71 options: { 72 //軸の設定 73 scales: { 74 //縦軸の設定 75 yAxes: [{ 76 //目盛りの設定 77 ticks: { 78 //最小値を0にする 79 beginAtZero: true 80 } 81 }] 82 }, 83 //ホバーの設定 84 hover: { 85 //ホバー時の動作(single, label, dataset) 86 mode: 'single' 87 } 88 } 89});
html
1</script> 2</body> 3</html>
また、Chart.jsでの実装が不可能 という場合はこれが可能な物をご教示いただけると幸いです。