Я использую диаграмму столбцов с Google Chart JS Api. Я показываю некоторые значения (общие заказы по дням), которые могут быть представлены только как целые числа.
Все работает отлично, за исключением того, что когда одна из диаграмм, которые я показываю, имеет слишком низкие значения, например 1 или 2, она начинает показывать десятичные числа по оси y. Десятичные числа выглядят глупыми b/c невозможным иметь "половину" порядка (это то, что я считаю), и я хотел бы скрыть это, если это возможно.
Примечание: см. fooobar.com/questions/303212/..., так как мой ответ неверен. (Я не могу удалить его, потому что он был принят.)
В ваших параметрах вы можете указать форматирование чисел для значения chxs:
chxs: '0N*f0*,
Здесь используется значение float (f) с 0 десятичными знаками (f0).
http://code.google.com/apis/chart/image/docs/gallery/bar_charts.html#axis_label_styles
У меня недостаточно ответов, чтобы ответить на сообщение Яна Хантера напрямую, но что это значит, форматирует метку, но не устанавливает линии сетки на то же значение, что и метка, что может иметь нежелательные результаты. Итак, скажем, у вас есть эти линии сетки:
10
7,5
5
2,5
0
Когда вы форматируете ярлык только для отображения целых чисел, это показывает: 10 8 5 3 0
Но тогда ваши данные на графике не привязываются к ярлыкам y-scale. Например, если у вас есть значение 3, оно фактически отображается над метками "3", потому что метка "3" фактически равна 2,5
К сожалению, единственным решением, о котором я мог думать, было отслеживание диапазонов min/max данных, показанных на графике, а затем применить некоторую логику для установки min/max в зависимости от того, сколько у меня ярлыков y-scale, так что они делятся без остатков.
Итак, в приведенном выше случае я установил его
vAxis: {
viewWindow:{
max:12,
min:0
}
}
Это даст линии сетки
12
-
6
4
0
Нет десятичных знаков, и никаких проблем с данными, не сопоставимыми с метками на графике.
используйте параметр
vAxis: {format: '0'}
как в
chart.draw(data, {
width: 800,
height: 480,
orientation: 'horizontal',
vAxis: {format: '0'}
}
);
Добавление {format: 0} преобразует тики float в целые числа, но фактические значения на барах отображаются неправильно.
Основная проблема заключается в том, что API графиков Google предполагает, что вы хотите, чтобы 5 линий сетки в основном не могли работать, чтобы дать вам значения целых тиков.
Добавление этого дало мне хорошие круглые значения тиков -
gridlines: { count: -1}
source - https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU
если вы хотите показать только целые значения, вы должны принять во внимание, что диаграммы google хотят показать вам как минимум 5 линий сетки. Предполагая, что все из них должны быть целыми, укажите следующий граф:
vAxis: { title: 'Orders Count',
minValue: 4,
viewWindow:{min:0}, /*this also makes 0 = min value*/
format: '0',
},
Самый простой способ - отредактировать левую вертикальную ось, с Min как 0 и Max как кратное 5 (5, 10, 15 и т.д.) в соответствии с вашим ожидаемым максимумом.
В моем случае у меня есть значения от 0 до 600.
Таким образом вы показываете только "целые числа".
Вам нужно будет динамически генерировать javascript вне курса.
Пример кода:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Fase', 'Closed', 'Open'],
<?php
$max = 0; // needed to determine the number of gridlines?
$data = array();
foreach($projectExecutions as $key => $pe){
$totals = countOpenIssuesInProjectExecution($pe);
$open = $totals['open'];
$closed = $totals['closed'];
$data[] = "['". $FASE[$pe['fase_id']] . "', " . $closed . ", ". $open . "]\r\n";
// What are the Max values vor Open & Closed Defects
if($open > $max ){ $max = $open; }
if($closed > $max ){ $max = $closed; }
}
$nrOfGridLines = ($max >= 12 ? 4 : $max+1); // Calculate the number of gridlines
echo implode(",",$data);
?>
]);
var options = {
legend: { position: 'bottom' }
,title: "Evolution Defects: Open -VS- Closed"
,colors:['#00a160','red']
,isStacked: true
,vAxis: {textPosition: 'in', minValue:0,viewWindow: { min: 0 }, gridlines: {count: <?php echo $nrOfGridLines; ?>} }
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_defects'));
chart.draw(data, options);
}
Я использую следующий код:
google.charts.setOnLoadCallback(function(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Y');
data.addColumn('number', 'X');
var max = 0; //Or something like Int.MinValue
for (var i = 0;i< arr.length;i++) {
max = (arr[i]>max)? arr[i]:max; //calculate max value
data.addRow("<<some calculation>>");
}
var options = {
height: 300,
vAxis: {
gridlines: { count: max+1}, //+1 is importent for the origingridline
viewWindow:{
min: 0,
max: max
},
}
};
var chart = new google.visualization.ColumnChart(document.getElementById("<< div_id >>"));
chart.draw(data, options);
}
Просто рассчитайте свое максимальное значение, а затем установите для gridlines.count значение
Я использую Guava Multiset в качестве своих данных. Трюк Cagy79 - единственный, с которым мне удалось поработать. Я также попытался сгенерировать свои собственные линии, используя IntStream, но все еще имел дробные числа для некоторых графиков. Как упомянуто выше, просто установка формата создаст график, где значение наведения и линия сетки различаются.
Multiset items = TreeMultiset.create();
Элементы, добавленные с помощью .add и .addAll
Убедитесь, что элементы отсортированы:
вхождения = Multisets.copyHighestCountFirst(items);
String option = "hAxis: {title: 'Count', линии сетки: {count:" + ((max> = 12)? 4: max + 1) +}} ")
Я предпочитаю опцию gridlines: { count: -1 }, но вы всегда можете явно указать нужные значения с помощью ticks. Крутая вещь в этом - они даже не должны быть равномерно распределены - вы можете сделать [1, 10, 100, 200, 500, 1000], если хотите:
options: { vAxis: { ticks: [1,2,3,4,5,6,7,8,9,10] } }
В зависимости от ваших данных вы можете захотеть жестко закодировать это или использовать пороговые значения.
Для тех, кто также ищет ответ, вы можете увидеть ответ на этот вопрос здесь, который использует параметры формата. Не удается получить Google Charts Axis для форматирования в десятичном формате
Эта проблема будет решена, если вы используете vAxis: {gridlines: { count: 4}}