web-dev-qa-db-ja.com

チャートAPIのx / y軸ラベルに整数のみ（小数ではない）を表示する方法

Google Chart JS Apiで縦棒グラフを使用しています。整数でしか表現できない値（1日の合計注文数）を表示しています。

私が表示しているグラフの1つが1や2などの低すぎる値を持っている場合を除いて、すべてがうまく機能しています。y軸に小数が表示され始めます。小数は愚かなb/cのように見えますが、順序を「半分」にすることは不可能です（これは私が数えているものです）、可能であればこれを非表示にしたいと思います。

javascriptgoogle-visualization
26
jpswain

Ian Hunterの投稿に直接返信するのに十分な担当者がいませんが、それはラベルをフォーマットすることですが、グリッド線をラベルと同じ値に設定しないため、望ましくない結果になる可能性があります。だから、これらのグリッド線があるとしましょう：

10

7.5

5

2.5

整数のみを表示するようにラベルをフォーマットすると、次のように表示されます。10 8 5 3 0

ただし、グラフ上のデータはyスケールのラベルと関連付けられません。たとえば、3の値がある場合、実際にはaboveと表示されます。これは、「3」ラベルが実際には2.5であるためです。

残念ながら、考えられる唯一の解決策は、グラフに表示されたデータの最小/最大範囲を監視し、いくつかのロジックを適用して、持っているyスケールラベルの数に従って最小/最大を設定することでした。剰余なしで分割されます。

上記のケースでは、次のように設定します

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

これにより、グリッド線が

12

8

6

4

小数、グラフのラベルと相関しないデータの問題はありません。

26
BigBadMe

オプションを使用する

vAxis: {format: '0'}

のように

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

{format：0}を追加すると、floatティックが整数に変換されますが、バーの実際の値は正しく表示されません。

主な問題は、Google Charts APIが5つのグリッド線を必要とすることを前提としています。

これを追加すると、素敵な丸いティック値が得られました-

  gridlines: { count: -1}

ソース- https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-Om

13
prad

整数値のみを表示したい場合は、Googleチャートが少なくとも5つのグリッド線を表示したいと考えていることを考慮する必要があります。それらのすべてが整数であると仮定すると、次のグラフが得られます。

vAxis: {  title: 'Orders Count',

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

最も簡単な方法は、Minを0、Maxを5の倍数（5、10、15など）として、予想される最大値に合わせて、左の縦軸を編集することです。

1
Bernie

私の場合、0から600の範囲の値があります。

  • $ valueが12より小さい場合：vAxis.gridlines.countの最大値を使用します
  • $ valueが12より大きい場合：グリッド線のデフォルトのnrを使用（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);
}
0
Cagy79

回答も検索している人は、オプション形式を使用してこの質問への回答をここで確認できます。 Googleチャート軸を10進数でフォーマットできません

0
maximran

gridlines: { count: -1 }オプションですが、ticksを使用して必要な値をいつでも明示的に指定できます。これのクールな点は、等間隔にする必要がないことです。必要に応じて、[1、10、100、200、500、1000]を実行できます。

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

データによっては、これをハードコーディングするか、しきい値を使用する必要があります。

0
Simon_Weaver

データとしてGuava Multisetを使用しています。 Cagy79のトリックは、私が機能することができた唯一のものです。 IntStreamを使用して独自のラインを生成することも試みましたが、一部のグラフでは小数が残っていました。上記のように、フォーマットを設定するだけで、ホバー値とグリッドラインが異なるグラフが作成されます。

マルチセットアイテム= TreeMultiset.create（）;

.addおよび.addAllを使用して追加されたアイテム

アイテムがソートされていることを確認します。

オカレンス= Mu​​ltisets.copyHighestCountFirst（items）;

文字列オプション= "hAxis：{title： 'Count'、gridlines：{count：" +（（max> = 12）？4：max + 1）+}} "）

0
Gregory Alan Bolcer

次のコードを使用しています。

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をこの値に設定するだけです

0
Vitali D.