направление текста диаграммы Google - PullRequest
Новая
       44

направление текста диаграммы Google

0 голосов
/ 09 декабря 2018

Я пытаюсь сделать Столбчатую диаграмму с Google.

function drawChartEPS(response) {

var data = new google.visualization.DataTable();

data.addColumn('string', 'Period');


data.addColumn('number', 'Q1');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');


data.addColumn('number', 'Q2');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');


data.addColumn('number', 'Q3');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');


data.addColumn('number', 'Q4');
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role: 'annotation'}, '');

data.addRows(response);

var options = {
    width: '100%',
    height: '80%',
    bar: {groupWidth: "90%", width: "100%", gap: "30%"},

    chartArea:{width:"100%",height:"100%"},

    annotations: {
        highContrast: true,
        style: 'point',
        textStyle: {
            fontName: 'Sans',
            fontSize: 16,
            bold: false,
            italic: false,
            direction:-1,
            slantedText:true,
            slantedTextAngle:90,

            opacity: 1
        }
    },
    legend: {
       position: 'none'
    }
};

var chart = new google.visualization.ColumnChart(
    document.getElementById('EPSChart'));

chart.draw(data, options);
}

И получить результат Google google

Но мне нужно, чтобы мой график выглядел так, как на этом рисунке examle Невозможно изменить направлениетекста на графиках и добавьте стрелки

1 Ответ

0 голосов
/ 09 декабря 2018

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

однако вам нужно будет использовать MutationObserver,
, поскольку график будет поворачивать их обратно при любом действии,
, например, "при наведении".

для поворота, добавьте атрибут transform к каждому элементу <text> в svg.
в атрибуте transform, используйте -> rotate(z x y), где ...
z = угол поворота
x = координата x элемента
y = координата y элемента

x & y уже будетбыть атрибутами в элементе,
, поэтому требуется только значение поворота, например -> -90 

transform="rotate(-90 100 300)"

, см. следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var data = new google.visualization.DataTable();

  data.addColumn('string', 'Period');


  data.addColumn('number', 'Q1');
  data.addColumn({type: 'string', role: 'style'});
  data.addColumn({type:'string', role: 'annotation'}, '');


  data.addColumn('number', 'Q2');
  data.addColumn({type: 'string', role: 'style'});
  data.addColumn({type:'string', role: 'annotation'}, '');


  data.addColumn('number', 'Q3');
  data.addColumn({type: 'string', role: 'style'});
  data.addColumn({type:'string', role: 'annotation'}, '');


  data.addColumn('number', 'Q4');
  data.addColumn({type: 'string', role: 'style'});
  data.addColumn({type:'string', role: 'annotation'}, '');

  data.addRows([['DEC', 500, 'cyan', '500', 600, 'magenta', '600', 650, 'yellow', '650', 700, 'lime', '700']]);

  var options = {
      width: '100%',
      height: '80%',
      bar: {groupWidth: "90%", width: "100%", gap: "30%"},

      chartArea:{width:"100%",height:"100%"},

      annotations: {
          highContrast: true,
          style: 'point',
          textStyle: {
              fontName: 'Sans',
              fontSize: 16,
              bold: false,
              italic: false,
              direction:-1,
              slantedText:true,
              slantedTextAngle:90,

              opacity: 1
          }
      },
      legend: {
         position: 'none'
      }
  };

  var container = document.getElementById('EPSChart')
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var observer = new MutationObserver(function () {
      var labels = container.getElementsByTagName('text');
      Array.prototype.forEach.call(labels, function(label) {
        if (label.getAttribute('text-anchor') === 'middle') {
          label.setAttribute('transform', 'rotate(-90, ' + label.getAttribute('x') + ' ' + label.getAttribute('y') + ')');
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(data, options);

});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="EPSChart"></div>
...