在同一页面上的多个图表上将 vAxis 设置为相同的比例答案

【问题标题】：Setting vAxis to same scale on multiple charts on the same page在同一页面上的多个图表上将 vAxis 设置为相同的比例
【发布时间】：2018-09-18 19:03:07
【问题描述】：

我有一个 html 文档，其中显示了从同一个 Fusion Table 中查询的三个折线图。第一个图表是每年的出生人数，另外两个显示每年的结婚和死亡人数。

我想设置 vAxis，以便所有三个图表都具有相同的 0-35,000 比例。我尝试了多种我在网上找到的解决方案，包括设置 viewWindowMode 最小/最大值和 vAxis:ticks。每次我尝试设置其中一个时，图表都无法显示。

这是我目前的工作，但它显示的最大 vAxis 值为 8K，我需要它为 35K 以匹配具有最高值的图表。

  google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);

  function drawChart() {

    var query = "SELECT 'Year', 'Death' FROM 1_ZsP2sm6HteqyygtifQ0cIRKn00cA1GDeRu4KMEr WHERE 'Year_n' >= 1829 AND 'Year_n' <= 2012 ORDER BY 'Year'" ;

    var queryText = encodeURIComponent(query);
    var gvizQuery = new google.visualization.Query(
        'https://www.google.com/fusiontables/gvizdata?tq=' + queryText);

    gvizQuery.send(function(response) {
      var chart = new google.charts.Line(
          document.getElementById('linechart_death'));

      chart.draw(response.getDataTable(), {
    chart: {title:'Records Per Year'},
    legend: {position:'none'},

    lineWidth: 100,
    colors: '#87BA41',
      });
    });
  }

  google.setOnLoadCallback(drawChart);

【问题讨论】：

标签： google-visualization google-fusion-tables linechart

【解决方案1】：

材料图表不支持几个配置选项，
见issues #: 2143。

这包括...

{hAxis,vAxis,hAxes.*,vAxes.*}.ticks
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
{hAxis,vAxis,hAxes.*,vAxes.*}.maxValue
{hAxis,vAxis,hAxes.*,vAxes.*}.viewWindowMode

为了使用这些选项，需要使用一个Classic图表...

材料 = google.charts.Line 来自 packages: ['line']

经典 = google.visualization.LineChart 来自packages: ['corechart']

有一个选项可以使 Classic 图表看起来 类似于 与 Material...

theme: 'material'

【讨论】：