How to reflect the tick value in tooltip content in Google charts (Bubble Chart)
我正在使用Angular Google图表库。 根据官方文档,x轴的值只能是一个数字。 我想按字符串绘制图形,因此我使用了
我可以将刻度中的值映射到工具提示内容的任何方式。
以下是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'}], } |
理想情况下,工具提示应显示与
谢谢!
默认情况下,工具提示将显示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], |