Как отобразить только целые числа (без десятичных знаков) в метках оси X / Y API диаграммы

Question

Я использую столбчатую диаграмму с Google Chart JS Api.Я отображаю некоторые значения (общее количество заказов за день), которые могут быть представлены только как целые числа.

Все работает отлично, за исключением того, что когда одна из отображаемых мной диаграмм имеет слишком низкие значения, например, 1 или 2, она начинает показывать десятичные дроби на оси Y.Десятичные знаки выглядят глупо, потому что невозможно иметь «половину» порядка (это то, что я считаю), и я хотел бы скрыть это, если это возможно.

Answer 1

Мне не хватает представителя, чтобы ответить на пост Иэна Хантера напрямую, но это отформатирует метку, но не устанавливает для строк сетки то же значение, что и метка, что может привести к нежелательным результатам. Допустим, у вас есть эти линии сетки:

10

7,5

5

2,5

0

Когда вы форматируете метку, чтобы показывать только целые числа, она показывает это: 10 8 5 3 0

Но тогда ваши данные на графике не привязываются к меткам шкалы y. Например, если у вас есть значение 3, оно на самом деле показывает выше метки '3', потому что метка '3' на самом деле 2.5

К сожалению, единственное решение, которое я мог придумать, - это отслеживать минимальные / максимальные диапазоны данных, показанных на графике, а затем применять некоторую логику, чтобы установить минимальные / максимальные значения в соответствии с тем, сколько у меня меток шкалы y, так что они будут делиться без остатков.

Так что в случае выше, я бы установил его на

        vAxis: { 
          viewWindow:{
            max:12,
            min:0
          }
        }

Это даст линии сетки

12

8

6

4

0

Нет десятичных дробей и нет проблем с данными, не коррелирующими с метками на графике.

Answer 2

используйте опцию

vAxis: {format: '0'}

, как в

chart.draw(data, {
                   width: 800,
                   height: 480,
                   orientation: 'horizontal',
                   vAxis: {format: '0'}
                  }
           );

Answer 3

Добавление {format: 0} преобразует тики с плавающей точкой в ​​целые числа, но фактические значения на столбцах отображаются неправильно.

Основная проблема заключается в том, что Google Charts API предполагает, что вам нужно в основном 5 линий сетки, которые могут не дать целочисленных значений тиков.

Добавление этого дало мне хорошие значения круглых тиков -

  gridlines: { count: -1}

источник - https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU

Answer 4

если вы хотите, чтобы отображались только целочисленные значения, вы должны принять во внимание, что в гугл-чартах должно отображаться не менее 5 линий сетки. Предполагая, что все они должны быть целыми числами, приведите следующий график:

vAxis: {  title: 'Orders Count',

                minValue: 4,                    
                viewWindow:{min:0}, /*this also makes 0 = min value*/         
                format: '0',                     
            },

Answer 5

Самый простой способ - отредактировать левую вертикальную ось с Min как 0 и Max, кратным 5 (5, 10, 15 и т. Д.), В соответствии с ожидаемым максимумом.

Answer 6

Для тех, кто также ищет ответ, вы можете увидеть ответ на этот вопрос здесь, который использует параметры формата. Не удалось получить ось Google Charts для форматирования в десятичном формате

Answer 7

Я предпочитаю параметр gridlines: { count: -1 }, но вы всегда можете явно указать нужные значения с помощью ticks.Крутая вещь в этом - они даже не должны быть равномерно распределены - вы можете сделать [1, 10, 100, 200, 500, 1000], если хотите:

options: { vAxis: { ticks: [1,2,3,4,5,6,7,8,9,10] } }

В зависимости от ваших данных вы можете захотеть жестко закодировать это или использовать пороговые значения.

Answer 8

Я использую мультисеть Guava в качестве своих данных.Уловка Cagy79 - единственная, с которой я смог работать.Я также попытался сгенерировать свои собственные линии, используя IntStream, но все еще имел дробные числа для некоторых графиков.Как упомянуто выше, просто установка формата создаст график, где значение наведения и линия сетки различаются.

Multiset items = TreeMultiset.create ();

Элементы, добавленные с использованием .add и .addAll

Убедитесь, что элементы отсортированы:

вхождения =Multisets.copyHighestCountFirst (items);

String option = "hAxis: {title: 'Count', линии сетки: {count:" + ((max> = 12)? 4: max + 1) +}}«)

Answer 9

Я использую следующий код:

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 на это значение

Answer 10

В моем случае у меня есть значения в диапазоне от 0 до 600.

• , если $ value меньше 12: используйте максимальное значение для vAxis.gridlines.count
• , если $значение больше 12: используйте номер сетки по умолчанию (4)

Таким образом, вы будете отображать только «целые числа».

Вам нужно будет динамически генерировать 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);
}