Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、サンプルとはどれのことでしょうか。
お世話になります。
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での実装が不可能 という場合はこれが可能な物をご教示いただけると幸いです。
回答1件
0
Chart.js の Documentation を読んだ限りでは原点を動かす設定は無いようです。CSSの transform:rotate() で無理やり回転とかはできそうとか考えたのですが、その場合数値なども回転してしまうのであんまりですね。
これが可能な物
Chart.js と同じような高機能グラフライブラリは Highcharts や D3.js が有名ですが、デモを見る限りでは D3.js のほうが可能性がありそうです。（実装もそれなりに大変そうですが･･･）
【Highcharts demos | Highcharts】
http://www.highcharts.com/demo
【Gallery · d3/d3 Wiki · GitHub】
https://github.com/d3/d3/wiki/Gallery
【Table With Embedded Line Chart - bl.ocks.org】
http://bl.ocks.org/llimllib/841dd138e429bb0545df
投稿2017/02/22 17:59
総合スコア69625
>>kei344様
早速の回答ありがとうございます。
やはり標準機能として回転は難しそうですね。
仰る通り無理やり回転はcanvas要素を使って実装しようかと試みましたが、凡例やマウスオーバー時の吹き出しも横向きとなってしまうため、断念致しました。
候補に挙げて頂いたHighchartsの chart: inverted オプションを true にすることでXY軸の入れ替え
またxAxis: reversed オプションを true にすることでX軸の方向を反転
これにより想定していたものに近い機能を実装できそうなので、この方向で挑戦してみようと思います。
あなたの回答
tips
プレビュー
