Question

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

Answer 1

创建链接所引用的图形使用单个y轴，底部为负值

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

然后对y轴刻度线（ticks:）

使用相同的表示法

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

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

＆＃13;

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']
});

＆＃13;

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

＆＃13;

我们可以绘制谷歌图表，其中两个y轴一个带顶部，另一个带底部，x轴相同？

1 个答案: