Question

我尝试创建基本Google Charts line chart以显示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>

但这是它的呈现方式：

文档建议设置vAxis.maxValue＆＃34;将垂直轴的最大值移动到指定值;在大多数图表中，这将是向上的。如果将此值设置为小于数据的最大y值，则忽略。＆＃34;但我显然错过了一些东西，因为它似乎没有被使用。

Answer 1

您使用材质图表Google api，请尝试使用：

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

Google Charts折线图未按百分比显示0-100

1 个答案: