Charts 谷歌图表折线图没有显示0-100的百分比比例_Charts_Google Visualization

Charts 谷歌图表折线图没有显示0-100的百分比比例

charts google-visualization

Charts 谷歌图表折线图没有显示0-100的百分比比例,charts,google-visualization,Charts,Google Visualization,我正在尝试创建一个基本值来显示3个值随时间变化的百分比。图表正在显示，但我正在努力使vAxis显示0-100%，最高值只是数据集中的最高值（45%）这是我正在使用的代码： <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascrip

我正在尝试创建一个基本值来显示3个值随时间变化的百分比。图表正在显示，但我正在努力使vAxis显示0-100%，最高值只是数据集中的最高值（45%）

这是我正在使用的代码：

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

          var data = new google.visualization.DataTable();
          data.addColumn('date', 'date');
          data.addColumn('number', 'tool1');
          data.addColumn('number', 'tool2');
          data.addColumn('number', 'tool3');

          data.addRows([
            [new Date(2000, 8, 5),  10, 20, 30],
            [new Date(2001, 8, 5),  20, 30, 40],
            [new Date(2002, 8, 5),  25, 35, 45],
          ]);

          var options = {
            chart: {
              title: 'Tool rollout'
            },
            vAxis: {minValue: 0,
                    maxValue: 100,
                    format: "percent"
                    },
            width: 900,
            height: 500,
          };

          var chart = new google.charts.Line(document.getElementById('line'));
          chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="line"></div>
</body>
</html>


load（'current'，{'packages'：['line']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'number'，'tool1'）；
data.addColumn（'number'，'tool2'）；
data.addColumn（'number'，'tool3'）；
data.addRows([
[新日期（2000年8月5日）、10日、20日、30日]，
[新日期（2001年8月5日）、20日、30日、40日]，
[新日期（2002年8月5日）、25日、35日、45日]，
]);
变量选项={
图表：{
标题：“工具卷展栏”
},
变量：{minValue:0，
最大值：100，
格式：“百分比”
},
宽度：900，
身高：500，
};
var chart=new google.charts.Line（document.getElementById（'Line'）；
图表绘制（数据、选项）；
}

但这就是它的渲染方式：

文档建议设置vAxis.maxValue“将纵轴的最大值移动到指定的值；这在大多数图表中都是向上的。如果将其设置为小于数据的最大y值的值，则会忽略。”但我显然遗漏了一些内容，因为这似乎没有得到使用

如果您正在使用材质图Google api，请尝试使用：

vAxis: {
        format: "#.#%",
        viewWindow: {
           max:1.0,
           min:0.2
        }
}