我们可以用两个 y 轴绘制 google 图表，一个在顶部，另一个在底部，具有相同的 x 轴吗？

Question

我需要使用具有两个 y 轴和一个 x 轴的 google 图表，例如 (https://en.wikipedia.org/wiki/Spirometry#/media/File:Flow-volume-loop.svg)。 google 图表是否支持这种类型的图表？

Answer 1

创建一个由 link
引用的图表使用单个 y 轴，底部为负值

然后使用对象表示法设置值 (v:) 和格式化值 (f:)
{v: -8, f: '8'}

然后对 y 轴刻度线使用相同的符号 (ticks:)

图表将在轴上显示格式化值以及工具提示

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['X', 'Y'],
      [1.5,  8],
      [2.5,  4],
      [3.5,  1],
      [1.5, {v: -8, f: '8'}],
      [2.5, {v: -4, f: '4'}],
      [3.5, {v: -1, f: '1'}],
    ]);

    var ticksX = [0, 2, 4, 6];
    var ticksY = [{v: -10, f: '10'}, {v: -8, f: '8'}, {v: -6, f: '6'}, {v: -4, f: '4'}, {v: -2, f: '2'}, 0, 2, 4, 6, 8, 10];

    var options = {
      hAxis: {
        title: 'h axis',
        ticks: ticksX
      },
      vAxis: {
        title: 'v axis',
        ticks: ticksY,
        viewWindow: {
          min: -10,
          max: 10
        }
      },
      height: 600,
      width: 600,
      chartArea: {
        height: '75%',
        width: '75%'
      }
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

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

我们可以用两个 y 轴绘制 google 图表，一个在顶部，另一个在底部，具有相同的 x 轴吗？

Can we draw google chart with two y-axis one with top and other with bottom, with same x-axis?

charts

google-visualization

angular-chart

angular