我们可以绘制两个y轴与顶部和其他与底部，相同的X轴谷歌图表？

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要使用两个y轴和一个x轴的谷歌图表，如（https://en.wikipedia.org/wiki/Spirometry#/media/File:Flow-volume-loop.svg）。谷歌图表是否支持这种类型的图表？我们可以绘制两个y轴与顶部和其他与底部，相同的X轴谷歌图表？

回答：

创建由链接
作为参考的曲线图使用一个单一的y轴，具有负值的底部

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

然后使用相同的符号来表示，y轴的刻度线（ticks:）

图表将显示FORMATT在轴上ED值以及提示

见下工作片断......

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轴与顶部和其他与底部，相同的X轴谷歌图表？ 的全部内容， 来源链接： utcz.com/qa/258606.html

回到顶部