javascript - Google Charts-ブレーク軸ラベルを2行に改行する方法は？（複数のX軸）

Question

私は次のようなグーグルの折れ線グラフを持っています：

10|                        .
  |            .....----''' ''--.
09| .-----'''''                  ''-
  |                                 '.
08|                                   \
  |                                    '.
07|                                      '.
  |________________________________________________________
   2012/12/27 12:01    2012/12/26 12:22    2012/12/25 11:33

そして、私はそれをこのように見せたいです（X軸ラベルに注意してください）：

10|                        .
  |            .....----''' ''-.
09| .-----'''''                 \
  |                              '.
08|                                \
  |                                 '.
07|                                   '.
  |_______________________________________________
   2012/12/27          2012/12/26       2012/12/25
   12:01               12:22            11:33

<br>、、を追加してみましたが、うまく\nいき\rませんでした。

ドキュメントを調べたところ、最も近いものが見つかりましたhAxis.maxTextLinesが、minTextLinesオプションがないため、強制する方法がわかりませんでした。これどうやってするの？

---

アップデート

グーグルにリンクしてチャートを作成するときにこれが可能だと思われます。変数に追加のx値を設定chxtする必要があります（ただし、さらに多くのx軸が必要です）chxt=y,x,x。次に、x軸ごとに、chxl変数を使用してラベルを設定します。chxl=1:|2012/12/27|2012/12/26|2012/12/25|2:|12:01|12:22|11:33

例えば：

http://chart.apis.google.com/chart?chxl=1:|2012/12/27|2012/12/26|2012/12/25 | 2：| 12：01 | 12：22 | 11： 33＆chxr = 0,7,10＆chxt = y、x、x＆chs = 360x240＆cht = bvg＆chco = 000000＆chd = t1：9,10,7＆cht = lc＆chds = 7,10

しかし、私がチャートを作成する方法は、JavaScriptを使用することです。こちらです：

google.setOnLoadCallback(function(){
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Count');

  //Populate data

  new google.visualization.LineChart(document.getElementById('chart')).
    draw(data, {curveType: 'function',
                chartArea: {left: 70, top: 50, width: '100%', height: '85%'},
                width: 950, height: 800,
                interpolateNulls: true,
                pointSize: 5,
                legend: {position: 'none'},
                vAxis: {title: 'Count', viewWindow: {min: 7, max: 10}},
                hAxis: {title: 'Date', viewWindow: {min: 0, max: 3}}
               });
});

したがって、このフォーマット/APIを使用してこれを行う方法を理解する必要があります。どうすればこの方法でそれを行うことができますか？

Answer 1

私が使用した：

hAxis：{形式：'MMM dd、yyy \ nHH：mm'}

私のオプション配列とGoogleAPIでそれを次のようにフォーマットしました

Mar 05, 2014
   16:00

Answer 2

最終更新

実例： http： //jsbin.com/eyokec/1/（バージョンの編集）

さて、いつものように、いくつかの掘り下げはいくつかの可能な解決策をもたらしました。私は1つを動作させることに成功しただけですが、少なくともこの時点でそれが可能であることを知っています。リンクをGoogleChartsAPIデータに挿入するからのこの回答は？上記の実用的なソリューションを提供しました。

  // Note: You will probably need to tweak these deltas
  // for your labels to position nicely.
  var xDelta = 35;
  var yDelta = 13;
  var years = ['2012/12/27|12:01','2012/12/26|12:22','2012/12/25|11:33','2012/12/24|11:33'];
  $('text').each(function(i, el) {
      if (years.indexOf(el.textContent) != -1) {
          var g = el.parentNode;
          var x = el.getAttribute('x');
          var y = el.getAttribute('y');
          var width = el.getAttribute('width') || 70;
          var height = el.getAttribute('height') || 35;
  
          // A "ForeignObject" tag is how you can inject HTML into an SVG document.
         var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
          fo.setAttribute('x', x - xDelta);
          fo.setAttribute('y', y - yDelta);
          fo.setAttribute('height', height);
          fo.setAttribute('width', width);

          var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
          var p = document.createElement("P");

          p.setAttribute("style", "font-size:.8em; font-family:Arial;text-align:center;color:#555;");
          p.innerHTML = el.textContent.replace('|','<br />');

          body.appendChild(p);
          fo.appendChild(body);
  
          // Remove the original SVG text and replace it with the HTML.
          g.removeChild(el);
          g.appendChild(fo);
      }
  });

上記のコードは機能しますが、当然のことながら、理想からはほど遠いものです。これは、うまくいけば使用できる概念実証にすぎません。SVGファイルの更新について他の同様の質問を見ましたが、それらを機能させることができませんでした。上記のコードは、複数行のサポートに<text>依存しているSVGノードを更新できる可能性があります。<tspan>ある時点でそれを機能させようとするかもしれません。

テスト

• クローム23.0.1271.97m：合格
• Firefox 17.0.1：PASS（より高い高さが必要）
• IE9：失敗（理由はわかりません）

参考文献

• ECMAScript（Javascript）とDOMを使用したSVGドキュメントの操作
• http://raphaeljs.com/
• jQuery SVG： http: //keith-wood.name/svg.html

---

0を更新

また、Google ImageChartsAPIは非推奨になっているようです。

重要：Google Chart Toolsの画像グラフの部分は2012年4月20日をもって正式に廃止されました。今後も、廃止ポリシーに従って機能します。

そのため、希望するものの例としてグラフを作成することはできますが、機能がGoogleグラフツールに引き継がれていない可能性があります。

そうは言っても、視覚化APIを使用してグラフを埋め込むために必要なJavaScriptを作成するのに役立つこのグラフウィザードを見つけました。

---

オリジナル

可能ではないようです。hAxis.minTextSpacingを使用して強制することができます。それは機能しますが、それは確かにその構成オプションの目的ではありません。ラベルを引き出してHTML経由で処理することもできますが、それも理想的ではないことを私は知っています。

Answer 3

必要な場所に改行を入れ\nます。例：

var data = [
    ["Days", "Pressure"],
    ["Mon\n16", 20],
    ["Tue\n17", 16],
    ["Wen\n18", 10],
    ["Thr\n19", 16],
    ["Fri\n20", 17]
];

結果の例

Answer 4

「\n」の代わりに「\\n」を使用してみてください。問題なく機能します。

Answer 5

私たちの場合、それはPHPの一重引用符と二重引用符でもありました。

悪いdate( 'Y\nM' )

より良いdate( "Y\nM" )