Графики Google. Как привязать метку оси разрыва в две строки? (Несколько осей X)

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

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

И я хочу, чтобы это выглядело так (обратите внимание на метку X-Axis):

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


UPDATE

Кажется, что это возможно при создании диаграмм путем ссылки на 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 = у, х, х & CHS = 360x240 & CHT = BVG & CHCO = 000000 & CHD = t1: 9,10,7 & CHT = ЖХ & = 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. Как я могу это сделать?

Ответ 1

Окончательное обновление

Рабочий пример: http://jsbin.com/eyokec/1/ (изменить версию)

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

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

Испытания

  • Chrome 23.0.1271.97 м: PASS
  • Firefox 17.0.1: PASS (требуется больше высоты)
  • IE9: FAIL (не уверен, почему)

Ссылки


Обновление 0

Кроме того, похоже, что API графических изображений Google теперь устарел.

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

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

Тем не менее, я нашел этот Chart Wizard, который поможет создать необходимый JavaScript для встраивания вашей диаграммы с помощью API визуализации.

Google Chart Image Example


Оригинальные

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

Ответ 2

Я использовал:

hAxis: {format: 'MMM dd, yyy\nHH: mm'}

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

Mar 05, 2014
   16:00

Ответ 3

Поместите разрыв строки \n, если необходимо например.

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

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

Ответ 4

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

Ответ 5

В нашем случае это был также PHP single- против двойных кавычек:

BAD date( 'Y\nM' )

ЛУЧШАЯ date( "Y\nM" )