Линейный график Google только полные шаги / тики - PullRequest
Новая
       7

Линейный график Google только полные шаги / тики

1 голос
/ 22 октября 2019

Я ищу способ задать шаги линейного графика только шагами с полным числом, например 1,2,3,4,5 .....

В настоящее время это выглядит так:

enter image description here

Это мои варианты. Я много искал, но не могу найти решение. 

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

В более старой библиотеке, которую я использовал раньше, у меня была включена следующая настройка, позволяющая разрешать только 1 размер шага: 

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

Возможно, у Google тоже есть, но я не могу найти что-нибудь оthis ..

Обновление

format: 0 заканчивается таким результатом:

enter image description here

Это действительно странно, потому что сейчас у нас есть 3 единицы и два нуля.

Обновление 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>

Ответы [ 2 ]

1 голос
/ 23 октября 2019

вы можете использовать опцию 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
}
1 голос
/ 22 октября 2019 
vAxis: {
  format: 0
}

Должен делать то, что вы ищете

Редактировать: Произошли дополнительные поиски, и, кажется, у вас могут возникнуть проблемы с простым применением этого - хотя этот вопрос уже задавался, вот ссылка

...