Google Charts折线图未按百分比显示0-100-Java 学习之路

我正在尝试创建一个基本的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>

但这是它的呈现方式：

enter image description here

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

1 回答

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

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

回复于 2024-04-29T11:52:15+08:00

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

1 回答

相关问题