Question

这是我的谷歌图表。

这是图表的选项代码：

 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,

但没有任何改变。

Answer 1

vAxis.ticks将覆盖所有其他设置，
给定y轴值是数字

从数据动态创建ticks，
你的数据表方法 - ＆gt; getColumnRange

您也可以使用format来确保整数

请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

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

＆＃13;

为什么谷歌图表的v轴的数字显示在点？

1 个答案: