我们可以用两个y轴绘制Google图表吗

我们可以用两个y轴绘制Google图表吗

本文介绍了我们可以用两个y轴绘制Google图表吗,一个y顶部,另一个y底部,x轴相同?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要使用带有两个y轴和一个x轴的Google图表,例如()。谷歌图表是否支持这种类型的图形?

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轴相同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 04:34