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

Question

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

1

Я пытаюсь сделать столбчатую диаграмму с 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);
}

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

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

Vasya Rotar 08 дек. 2018, в 22:30

Источник

Теги:

javascript

google-visualization

1 ответ

Ещё вопросы

WhiteHat · Answer 1 · 2018-12-08T20-20-00.000Z

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

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

чтобы повернуть, добавьте атрибут transform к каждому элементу <text> в svg.
в атрибуте transform используйте → rotate(zxy), где...
z= угол поворота
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>