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

Ответ 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 (не уверен, почему)

Ссылки

• Манипулирование документами SVG с использованием ECMAScript (Javascript) и DOM
• http://raphaeljs.com/
• jQuery SVG: http://keith-wood.name/svg.html

Обновление 0

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

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

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

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

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

Не представляется возможным. Вы можете заставить его использовать 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" )