2

我正在使用 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'}],
}

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

谢谢！

4

1 回答 1

0

默认情况下，工具提示将显示 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],
于 2020-06-24T12:21:48.210 回答