Google Charts Material柱状图hAxis显示全部标签问题求助

我明白你遇到的困扰——Material版本的柱状图（google.charts.Bar）有时候不会遵循showTextEvery: 1的配置，导致横轴只显示间隔标签。这是因为Material Charts和经典Google Charts在配置项处理上存在差异，直接依赖showTextEvery可能达不到预期效果，我们可以通过**手动指定横轴刻度（ticks）**的方式强制显示所有标签。

具体解决方案步骤： #

• 先从数据源中提取所有横轴需要展示的数值（也就是每个item.rua的值），整理成一个数组。
• 在图表的options配置中，给hAxis添加ticks属性，将整理好的数组赋值给它，让图表严格按照你指定的刻度渲染所有标签。

修改后的完整代码： #

desenharGrafico(data: Array<any>) { 
  var rows: Array<any> = []; 
  // 新增：收集所有横轴的rua值
  var hAxisTicks: Array<any> = [];
  for (var item of data) { 
    var rua = item.rua; 
    var valor = item.valor; 
    var valorCortado = item.valorCortado; 
    var objeto = { c: [{ v: rua }, { v: valor }, { v: valorCortado }] }; 
    rows.push(objeto);
    // 将每个rua值加入ticks数组
    hAxisTicks.push(rua);
  } 
  var chartData = new google.visualization.DataTable({ 
    cols: [ 
      { id: '', label: 'Rua', type: 'number' }, 
      { id: '', label: 'Faturado', type: 'number' }, 
      { id: '', label: 'Corte', type: 'number' } 
    ], 
    rows: rows 
  }); 
  var options = { 
    title: "Período: " + this.data1 + ' á ' + this.data2, 
    hAxis: { 
      slantedText: true, 
      showTextEvery: 1,
      // 新增：手动指定所有横轴刻度
      ticks: hAxisTicks
    }, 
    legend: "none", 
  }; 
  var chart = new google.charts.Bar(document.getElementById('cortes-rua')); 
  chart.draw(chartData, google.charts.Bar.convertOptions(options)); 
}

为什么这个方法有效？ #

Material Charts的convertOptions方法并不是完全兼容经典图表的所有配置项，showTextEvery在部分场景下会被忽略。而手动设置ticks是直接告知图表要显示的横轴刻度，优先级更高，能确保所有你需要的标签都被渲染出来。

如果你的横轴标签是字符串类型，只需要把ticks数组里的元素改成new google.visualization.TextValue(rua)即可；你的场景里rua是数值类型，直接传入数值就能正常工作。

内容的提问来源于stack exchange，提问作者Jeterson Miranda Gomes