ColumnChart 不显示所有字符串标签答案

【问题标题】：ColumnChart not show all string labelsColumnChart 不显示所有字符串标签
【发布时间】：2021-02-16 12:23:40
【问题描述】：

我有以下与 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});

并且此代码（使用 Number 设置的标签并正常工作）： 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});

【问题讨论】：

嗨@WhiteHat 我指的是当鼠标悬停在每一列时的工具提示......并且不显示图表中的所有数据
看起来像图表的限制，如果我增加图表的宽度，会显示更多的列，但仍然不是全部。为什么要使用字符串而不是数字？我们可能会在使用数字时找到解决方法...
嗨@WhiteHat，我需要使用字符串，因为..每列代表一个日期（01-02-2021）..并且只能使用此工具提示标签..但例如使用线性图表作品正确：jsfiddle.net/qzgo2rn5 我认为这是 ColumnChart 的错误。

标签： javascript charts google-visualization column-chart

【解决方案1】：

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

setCell(rowIndex, columnIndex, value, formattedValue)

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

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

请参阅以下工作 sn-p...

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 加载的谷歌图表版本已被弃用，不应再使用。

改为使用loader.js，这只会更改加载语句。
见上面sn-p...

【讨论】：