Question

我正在寻找一种将折线图步骤设置为仅整数步骤的方法，例如1,2,3,4,5 .....

当前看起来像这样：

这些是我的选择。我已经搜索了很多，但是找不到解决方案。

let options = {
    vAxis: {
        title: "Tests",
        textStyle:{
            color: "#222222"
        },
        viewWindowMode: "explicit",
        viewWindow: {
            min: 0,
        }
    },
};

在以前的库中，在启用以下设置之前，我只允许使用1个步长：

"ticks": {
    "beginAtZero": true,
    "stepSize": 1
}

也许Google也有这个，但我对此一无所知。

更新

format: 0最终得到以下结果：

这真的很奇怪，因为我们现在有3个和2个零。

更新2

这是我的情况的一个例子，没有给出任何数据。我无法在这里运行它，但是在我的系统上它是这样工作的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script 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() {
	let data = new google.visualization.DataTable();
	
	data.addColumn("string", "Months");
	data.addColumn("number", "Tests");
  
  data.addRows([
    ["January",  0],
		["February",  0],
		["March",  0],
		["April",  0],
		["May",  0],
		["June",  0],
		["July",  0],
		["August",  0],
		["September",  0],
		["October",  0],
		["November",  0],
		["December",  0]
    ]);
    
    let options = {
        chart: {
            title: "Statistics of tests",
            subtitle: "per Month"
 		},
 		titleTextStyle: {
            fontSize: 15
        },
 		vAxis: {
 		    title: "Tests",
  			viewWindowMode: "explicit",
  			viewWindow: {
    			min: 0,
  			}
		}
    
    function initChart() {
		let chart = new google.charts.Line(document.getElementById("chart"));
    	chart.draw(data, google.charts.Line.convertOptions(options));
	}
	window.onload = initChart();
	window.onresize = initChart;
}
</script>
<div id="chart"></div>

Answer 1

vAxis: {
  format: 0
}

应该做你想要的

编辑：进行了更多搜索，仅应用此按钮似乎就有些麻烦-尽管here is the link

曾被问过此问题。

Answer 2

您可以使用ticks选项。

vAxis: {
  format: '0',
  ticks: [0, 1]  // <-- a grid line will be drawn for each tick added
}

如果要动态添加刻度，
您可以使用数据表方法-> getColumnRange(colIndex)
此方法返回具有提供的列的min和max值的对象

然后您可以循环创建刻度线...

var range = data.getColumnRange(1);
var ticks = [];
for (var i = 0; i <= range.max; i++) {
  ticks.push(i);
}

然后在选项中...

vAxis: {
  format: '0',
  ticks: ticks
}

Google折线图仅完整步骤/对勾

2 个答案: