如何在 Google 图表（气泡图）的工具提示内容中反映刻度值

Question

我正在使用 Angular Google 图表库。根据官方文档，x 轴的值只能是一个数字。我想按字符串绘制图表，因此我使用了hAxis.tick，它将水平轴图很好地更改为字符串。但是，这并没有反映工具提示，工具提示仍然显示一个数字。

我可以使用任何方式将刻度中的值映射到工具提示内容。

下面是 HTML 的示例 sn-p 代码

<google-chart
      title="Bubble Chart"
      type="BubbleChart"
      [data]="plotData"
      [options]="bubbleChartoptions"
      [columns]="bubbleColumnNames"
      [width]="550"
      [height]="350"
    >
    </google-chart>

此外，ts 文件包含以下用于绘制数据的数据

bubbleColumnNames:['ToDisplay', 'hAxisValue', 'vAxisValue','bubbleType','size'] 


plotData: [
            ['', 1, 3, 'Bubble1', 10],
            ['', 1, 8, 'Bubble2', 20],
            ['', 2, 3, 'Bubble1', 30],
            ['', 2, 4, 'Bubble2', 40],
            ['', 3, 6, 'Bubble1', 50],
            ['', 3, 7, 'Bubble2', 60],
            ['', 4, 7, 'Bubble1', 70],
            ['', 4, 7, 'Bubble2', 80],
          ],
bubbleChartoptions = {
  hAxis: {
  ticks: [{  v: 1, f:'param1'}, {v: 2, f:'param2'}, {v: 3, f:'param3'}],
}

理想情况下，工具提示应该显示对应于hAxisValue 的 param1，但它显示的是1

谢谢！

Answer 1

tooltip会默认显示x轴的格式化值。

很像您生成的刻度，
我们可以使用对象表示法在数据中提供格式化的值...

plotData: [
  ['', {v: 1, f: 'param1'}, 3, 'Bubble1', 10],
  ['', {v: 1, f: 'param1'}, 8, 'Bubble2', 20],
  ['', {v: 2, f: 'param2'}, 3, 'Bubble1', 30],
  ['', {v: 2, f: 'param2'}, 4, 'Bubble2', 40],
  ['', {v: 3, f: 'param3'}, 6, 'Bubble1', 50],
  ['', {v: 3, f: 'param3'}, 7, 'Bubble2', 60],