Google Charts - как разбить метку оси на две строки? (Несколько Осей X)

у меня есть линейная диаграмма google, которая выглядит примерно так:

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 параметры, поэтому я не мог выяснить, как заставить его. Как мне это сделать? это?


обновление

кажется, что это возможно при создании диаграмм путем ссылки на google. Вам просто нужно установить chxt переменная с дополнительными значениями x (однако вам нужно больше осей 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. Как я могу так поступить?

4 ответов


Последнее Обновление

Пример: http://jsbin.com/eyokec/1/ (Edit версии)

Ну, как обычно, некоторые раскопки дали несколько возможных решений. Мне удалось только заставить его работать, но, по крайней мере, вы знаете, что это возможно. ответ С вставить ссылки в данные Google Charts api? при условии, что рабочее решение выше.

  // 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, но я не мог заставить их работать. Приведенный выше код может обновить Th SVG <text> узлы опираясь на <tspan> для многострочной поддержки. В какой-то момент я могу попытаться заставить это работать.

тесты

  • Chrome 23.0.1271.97 m: PASS
  • Firefox 17.0.1: PASS (больше высоты необходимо)
  • IE9: сбой (не уверен, почему)

ссылки


обновление 0

кроме того, похоже, что Google Image Charts API теперь устарел.

важно: часть диаграмм изображений инструментов Google Chart была официально осуждаемый по состоянию на 20 апреля 2012 года. Он будет продолжать работать в соответствии с нашими осуждение политики.

Итак, хотя вы можете создать диаграмму в качестве примера того, что вы хотели бы, возможно, что функциональность не была перенесена на инструменты Google Chart.

тем не менее, я нашел это Мастер Диаграмм это поможет создать необходимый JavaScript для встраивания диаграммы в API визуализации.

Google Chart Image Example


Оригинал

не представляется возможным. вы можете заставить его с помощью hAxis.minTextSpacing. Он работает, но это, конечно, не цель этого параметра конфигурации. вы также можете вытащить метки и обрабатывать их через HTML, но я знаю, что это не идеальный способ.


Я:

hAxis: {формат: 'MMM dd, yyy \nHH:mm'}

в моем массиве опций и Google API отформатировали его как

Mar 05, 2014
   16:00

поставить разрыв строки \n где это необходимо например,

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

пример результата


попробуйте использовать "\\n "вместо" \n", он отлично работает для меня.