javascript - ColumnChart 不显示所有字符串标签

Question

我有以下与 ColumnChart ( https://developers.google.com/chart/interactive/docs/gallery/columnchart ) 相关的问题。

如果标签(当您将鼠标悬停在任何看起来像工具提示的列中时)设置为数字，则所有 2000 个项目都会正确显示。但是，如果将标签设置为字符串，它只会在图表中显示 289 个项目，并且由于未知原因缺少 1711 列。

我有这段代码(标签设置为字符串，只显示 289 个项目而不是 2000 个): http://jsfiddle.net/c809mbjx/11/

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string' ,'Day');
    data.addColumn('number', 'Matches');
    var dataArray = []
    let number = 2000
    data.addRows(number);
    for (var i = 0; i < number;i++) {
     data.setCell(i,0,"aaa_"+i)
     data.setCell(i,1,i);
    }
    //var data = new google.visualization.arrayToDataTable(dataArray);        
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);
    var options = {
            colors: ['#0095e8'],
            hAxis: {textPosition: 'none'},
            vAxis: {minValue: 0, viewWindow: {min: 0}},
            legend: 'none',
            animation: {duration: 10000, easing: 'out'}
        };
    chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

此代码(标签设置为数字且工作正常): http://jsfiddle.net/c809mbjx/12/

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number' ,'Day');
    data.addColumn('number', 'Matches');
    var dataArray = []
    let number = 2000
    data.addRows(number);
    for (var i = 0; i < number;i++) {
     data.setCell(i,0,i)
     data.setCell(i,1,i);
    }
    //var data = new google.visualization.arrayToDataTable(dataArray);        
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var view = new google.visualization.DataView(data);
        view.setColumns([0, 1]);
    var options = {
            colors: ['#0095e8'],
            hAxis: {textPosition: 'none'},
            vAxis: {minValue: 0, viewWindow: {min: 0}},
            legend: 'none',
            animation: {duration: 10000, easing: 'out'}
        };
    chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

Answer 1

我们可以在 x 轴上使用数字，但仍会在工具提示上显示字符串。
这可以通过设置 setCell 方法的最后一个参数来实现 --> formattedValue

setCell(rowIndex, columnIndex, value, formattedValue)

工具提示默认会显示格式化后的值。
所以我们提供数字作为值，我们自己的字符串作为格式化值。

   data.setCell(i,0,i,"aaa_"+i);

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number' ,'Day');
  data.addColumn('number', 'Matches');
  let number = 2000;
  data.addRows(number);
  for (var i = 0; i < number;i++) {
   data.setCell(i,0,i,"aaa_"+i);
   data.setCell(i,1,i);
  }
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);
  var options = {
    colors: ['#0095e8'],
    hAxis: {textPosition: 'none'},
    vAxis: {minValue: 0, viewWindow: {min: 0}},
    legend: 'none',
    animation: {duration: 10000, easing: 'out'}
  };
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

---

注意:使用 jsapi 加载的 google charts 版本已被弃用，不应再使用。

相反，使用loader.js，这只会改变加载语句。
看上面的片段...