Googleグラフのv軸の数字がポイントで表示されるのはなぜですか？

Question

これはgoogle chartのマイチャートです。

これは、チャートのオプションコードです：

var optionsCategoryNameChart = { 
          //title: 'Job/Internship Distribution by Category', 
          titleTextStyle: { 
            color: 'Black', 
            fontSize: 18 
           }, 
           pieSliceText: 'none', 
          fontSize: '11', 
          hAxis: { 
            title: 'Category Name', 
           }, 
          vAxis: { 
            title: 'Total', 
            minValue: 0, 
            ticks: [0,1,2,3]   
           }, 
          legend: {textStyle: {color: '#464847', fontSize: 11}}, 
          tooltip: {isHtml: true}, 
          backgroundColor: '#F8F9FA', 
          colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'], 
          chartArea: { 
            backgroundColor: { 
             stroke: '#fff', 
             strokeWidth: 1 
            } 
           }, 
          height: 300, 
          chartArea: { left:"5%",top:"20%",width:"80%",height:"50%" } 
           };   

私は浮動小数点数または何か他のものとして、v軸を設定していないが、なぜそれが浮動小数点数として出てきますか？ どのように番号0,1,2,3,4に変更したいですか？私は試しました

minValue: 0, 

何も変わりません。また、あなたができる>getColumnRange

-

Answer 1

vAxis.ticksあなたは、データテーブル方式、他のすべての設定を上書きし、y軸の値はデータから動的にticksを作成するために、数字

ある与えられた
、
ますformatを使用して整数を確認してください

次の作業スニペットを参照してください。

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'CATEGORY'); 
 
    data.addColumn('number', 'JOB'); 
 
    data.addColumn('number', 'INTERNSHIP'); 
 
    data.addRows([ 
 
     ['Design', 1, 2], 
 
     ['Construction', 3, 4] 
 
    ]); 
 

 
    // find range of each y-axis column 
 
    var range = { 
 
     max: 0, 
 
     min: 0 
 
    }; 
 
    if (data.getNumberOfRows() > 0) { 
 
     for (var i = 1; i < data.getNumberOfColumns(); i++) { 
 
     var colRange = data.getColumnRange(i); 
 
     range.max = Math.max(range.max, colRange.max); 
 
     range.min = Math.min(range.min, colRange.min); 
 
     } 
 
    } 
 

 
    // build ticks from range 
 
    var ticks = []; 
 
    for (var i = range.min; i <= range.max; i++) { 
 
     ticks.push(i); 
 
    } 
 

 
    var options = { 
 
     titleTextStyle: { 
 
     color: 'Black', 
 
     fontSize: 18 
 
     }, 
 
     fontSize: '11', 
 
     hAxis: { 
 
     title: 'Category Name', 
 
     }, 
 
     vAxis: { 
 
     title: 'Total', 
 
     ticks: ticks, 
 
     format: '#,##0' 
 
     }, 
 
     legend: {textStyle: {color: '#464847', fontSize: 11}}, 
 
     tooltip: {isHtml: true}, 
 
     backgroundColor: '#F8F9FA', 
 
     colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'], 
 
     chartArea: { 
 
     backgroundColor: { 
 
      stroke: '#fff', 
 
      strokeWidth: 1 
 
     } 
 
     }, 
 
     height: 300, 
 
     chartArea: { 
 
     bottom: 48, 
 
     left: 36, 
 
     right: 12, 
 
     top: 12, 
 
     width: '100%', 
 
     height: '100%' 
 
     } 
 
    }; 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>