我们可以用两个y轴绘制Google图表吗，一个y顶部，另一个y底部，x轴相同？ [英] Can we draw google chart with two y-axis one with top and other with bottom, with same x-axis?

问题描述

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

I need to use google chart with two y-axis and one x-axis, like (https://en.wikipedia.org/wiki/Spirometry#/media/File:Flow-volume-loop.svg). Does google chart support this type of graph?

推荐答案

创建链接所引用的图形

使用单个y轴，底部为负值

to create a graph as referenced by the link
use a single y-axis, with negative values for the bottom portion

然后使用对象符号设置两个值（ v：）和格式化值（ f：）

{v：-8，f：'8' }

then use object notation to set both the value (v:) and the formatted value (f:)
{v: -8, f: '8'}

然后对y轴刻度线使用相同的符号（标记：）

then use the same notation for the y-axis tick marks (ticks:)

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

the chart will display the formatted value on the axis as well as tooltips

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

see following working snippet...

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图表吗，一个y顶部，另一个y底部，x轴相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！