Перемещение осей - Google Chart

Следуя моему предыдущему вопросу (4 ОСИ - Google Chart), поскольку я не могу перемещать саму ось, я обнаружил, что текст оси имеет положение x. Мне интересно, могу ли я изменить эту позицию. Что-то вроде этого:

    $("[x=845]").each(function(){
      x = 800;
    })
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
464
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

конечно возможно, график нарисован с использованием svg,
как только срабатывает событие 'ready' на графике,
вы можете работать с элементами svg, аналогично работе с элементами html

но будет сложно определить точное размещение этикеток,
особенно если диаграмма адаптируется по размеру

см. следующий рабочий фрагмент для примера,
границы диаграммы используются, чтобы помочь с размещением,
однако диаграмма имеет заданную ширину ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2', 'y3'],
    ['A', 15, 30, 65, 100],
    ['B', 12, 32, 67, 101],
    ['C', 14, 32, 67, 101],
    ['D', 18, 33, 68, 110],
    ['E', 17, 33, 68, 110],
    ['F', 17, 45, 70, 112],
    ['G', 18, 46, 71, 113],
    ['H', 22, 47, 72, 110],
    ['I', 24, 47, 72, 112],
    ['J', 20, 47, 72, 105],
    ['K', 17, 45, 70, 105],
    ['L', 17, 33, 68, 104],
    ['M', 16, 33, 68, 105],
    ['N', 15, 32, 67, 103]
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labelBounds;
    var labelGap;
    var labelIndex = -1;
    var labelWidth;
    var xCoord;

    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      // move axis labels
      if ((label.getAttribute('text-anchor') === 'start') && (label.getAttribute('fill') === '#ff0000')) {
        labelIndex++;
        labelBounds = chartLayout.getBoundingBox('vAxis#1#label#' + labelIndex);
        labelWidth = labelBounds.width;
        labelGap = chartBounds.left - parseFloat(label.getAttribute('x'));
        xCoord = chartBounds.left + chartBounds.width + labelGap - labelWidth;
        label.setAttribute('x', xCoord);
      }

      // move axis title
      if ((label.getAttribute('text-anchor') === 'middle') && (label.textContent === 'var1')) {
        labelBounds = chartLayout.getBoundingBox('vAxis#1#title');
        labelWidth = labelBounds.width;
        labelGap = chartBounds.left - parseFloat(label.getAttribute('x'));
        xCoord = chartBounds.left + chartBounds.width + labelGap + labelWidth;
        var rotate = 'rotate(-90 ' + xCoord + ' ' + label.getAttribute('y') + ')';
        label.setAttribute('x', xCoord);
        label.setAttribute('transform', rotate);
      }
    });
  });

  chart.draw(data, {
    chartArea: {
      right: 136
    },
    series: {
      0: {targetAxisIndex: 0},
      1: {targetAxisIndex: 1},
      2: {targetAxisIndex: 2},
      3: {targetAxisIndex: 3}
    },
    vAxes: {
      0: {title: 'var0', textPosition: 'in', textStyle:{color:'blue'}},
      1: {title: 'var1', textPosition: 'out', textStyle:{color:'red'}},
      2: {title: 'var2', textPosition: 'in', textStyle:{color:'orange'}},
      3: {title: 'var3', textPosition: 'out', textStyle:{color:'green'}}
    },
    width: 1264
  });
});
<script src = "https://www.gstatic.com/charts/loader.js"></script>
<div id = "chart_div"></div>

Спасибо!!! Это займет у меня время, но с вашей помощью я разберусь :) :)

cecimo 22.08.2018 14:39

Другие вопросы по теме