关于角度:如何在Google图表(气泡图)的工具提示内容中反映刻度值

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

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

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

以下是HTML的示例代码片段

1
2
3
4
5
6
7
8
9
10
<google-chart
      title="Bubble Chart"
      type="BubbleChart"
      [data]="plotData"
      [options]="bubbleChartoptions"
      [columns]="bubbleColumnNames"
      [width]="550"
      [height]="350"
    >
    </google-chart>

此外,ts文件包含以下数据,这些数据用于绘制数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

谢谢!


默认情况下,工具提示将显示x轴的格式化值。

非常像您生成的刻度线,
我们可以使用对象符号在数据中提供格式化的值...

1
2
3
4
5
6
7
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],