Question

在上一个问题（4 vAxes - Google Chart）之后，由于我无法移动轴本身，我发现轴的文本位于x位置。我想知道我是否可以改变这个位置。像这样：

    $("[x=845]").each(function(){
      x = 800;
    })

Answer 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>

移动vAxes-Google图表

1 个答案: