Question

我很难在右侧获得垂直轴，我读了this帖子，但它是在5年前，并没有找到垂直图形方向。我也无法在图表的左侧和右侧显示垂直轴。

我希望有一种比制作假列更好的方法....

＆＃13;

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data1 = new google.visualization.DataTable();

      data1.addColumn('number', 'x');
      data1.addColumn('number', 'y1');

      data1.addRows([
        [0.005, 3],
        [0.006, 6],
        [0.007, 5],
        [0.008, 8],
        [0.009, 2],
        [0.010, 5],
        [0.011, 5],
        [0.012, 4],
        [0.013, 8]
      ]);

      var data2 = new google.visualization.DataTable();
      data2.addColumn('number', 'x');
      data2.addColumn('number', 'y2');

      data2.addRows([
        [0.016, 5],
        [0.017, 1],
        [0.018, 3],
        [0.019, 9],
        [0.020, 4],
        [0.021, 5],
        [0.022, 7],
        [0.023, 7],
        [0.024, 3]
      ]);


      var joinedData = google.visualization.data.join(data1, data2, 'full',
        [[0, 0]], [1], [1]);

      var options = {
        title: 'playground',
        colors: ['#FA7F01', '#AEAAA2'],
        interpolateNulls: true,
        hAxis: {
          title: 'x',
          titleTextStyle: {
            color: '#333'
          },
          direction: 1,
          format: 'decimal'
        },
        vAxis: {
          title: 'y',
          direction: 1
        },
        orientation: 'vertical',

        annotations: {
          alwaysOutside: true,
          stem: {
            color: '#ff00ff',
            length: 10
          },
        },

        // customize colum
        series: {
          0: {type: "steppedArea"},
          1: {type: "steppedArea"},
        },
      };


      var view = new google.visualization.DataView(joinedData);
      view.setColumns([0,
        1,
        {
          calc: "stringify",
          sourceColumn: 1,
          type: "string",
          role: "annotation"
        },
        2,
        {
          calc: "stringify",
          sourceColumn: 2,
          type: "string",
          role: "annotation"
        }
      ]);

      var container = document.getElementById('chart_div');
      var chart = new google.visualization.ComboChart(container);

      chart.draw(view.toDataTable(), options);

    }
  </script>
</head>

<body>
  <div id="chart_div" style="width: 100%; height: 500px;"></div>
<div id="visualization"></div>
</body>

</html>

＆＃13;

Answer 1

通常，您可以使用targetAxisIndex将轴移动到右侧，
但这似乎不适用于 - ＆gt; orientation: 'vertical'

虽然不理想，但您可以在图表的'ready'事件中手动移动轴...

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data1 = new google.visualization.DataTable();
  data1.addColumn('number', 'x');
  data1.addColumn('number', 'y1');
  data1.addRows([
    [0.005, 3],
    [0.006, 6],
    [0.007, 5],
    [0.008, 8],
    [0.009, 2],
    [0.010, 5],
    [0.011, 5],
    [0.012, 4],
    [0.013, 8]
  ]);

  var data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'x');
  data2.addColumn('number', 'y2');
  data2.addRows([
    [0.016, 5],
    [0.017, 1],
    [0.018, 3],
    [0.019, 9],
    [0.020, 4],
    [0.021, 5],
    [0.022, 7],
    [0.023, 7],
    [0.024, 3]
  ]);

  var joinedData = google.visualization.data.join(data1, data2, 'full',
    [[0, 0]], [1], [1]);

  var options = {
    title: 'playground',
    colors: ['#FA7F01', '#AEAAA2'],
    interpolateNulls: true,
    hAxis: {
      title: 'x',
      titleTextStyle: {
        color: '#333'
      },
      direction: 1,
      format: 'decimal'
    },
    vAxis: {
      title: 'y',
      direction: 1
    },
    orientation: 'vertical',

    annotations: {
      alwaysOutside: true,
      stem: {
        color: '#ff00ff',
        length: 10
      },
    },

    // customize colum
    series: {
      0: {type: "steppedArea"},
      1: {type: "steppedArea"},
    },
    legend: {
      alignment: 'end',
      position: 'top'
    }
  };


  var view = new google.visualization.DataView(joinedData);
  view.setColumns([0,
    1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2,
    {
      calc: "stringify",
      sourceColumn: 2,
      type: "string",
      role: "annotation"
    }
  ]);

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ComboChart(container);

  google.visualization.events.addListener(chart, 'ready', moveAxis);

  function moveAxis() {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labelGap;
    var labelIndex = -1;
    var labelWidth;
    var xCoord;
    var yTitle;

    // move axis labels
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      labelWidth = 0;
      if (label.getAttribute('text-anchor') === 'end') {
        labelIndex++;
        labelWidth = chartLayout.getBoundingBox('vAxis#0#label#' + labelIndex).width;
        labelGap = chartBounds.left - parseFloat(label.getAttribute('x'));
        xCoord = chartBounds.left + chartBounds.width + labelWidth + labelGap;
        label.setAttribute('x', xCoord);
      } else if ((label.getAttribute('text-anchor') === 'middle') && (label.hasAttribute('transform'))) {
        yTitle = label;
      }
    });
    yTitle.setAttribute('y', xCoord + 92);

    // swap axis baselines
    var lines = container.getElementsByTagName('rect');
    Array.prototype.forEach.call(lines, function(line) {
      if ((parseFloat(line.getAttribute('x')) === (chartBounds.left + chartBounds.width - 1)) && (parseFloat(line.getAttribute('width')) === 1)) {
        line.setAttribute('x', chartBounds.left);
      } else if ((parseInt(line.getAttribute('x')) === chartBounds.left) && (parseInt(line.getAttribute('width')) === 1) && (line.getAttribute('fill') === '#333333')) {
        line.setAttribute('x', chartBounds.left + chartBounds.width - 1);
      }
    });
  }

  chart.draw(view.toDataTable(), options);
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Answer 2

尝试将此添加到您的选项中：

series: {
     0: { targetAxisIndex: 1, },
     1: { targetAxisIndex: 1, },
}

这意味着你的系列都应该使用右侧轴。

Google Charts：vAxis位于垂直方向图表的右侧

2 个答案: