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

Question

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

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

下面是 HTML

的示例代码段

<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

工具提示默认显示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],

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

How to reflect the tick value in tooltip content in Google charts (Bubble Chart)

charts

google-visualization

angular

xticks