javascript - 如何将 'tooltip' 添加到 angular-google-charts 中的时间线图表？

Question

我正在尝试使用 Angular 7 应用程序中的 angular-google-charts 库将工具提示添加到时间线图表中。当我在索引 = 2 处添加第五列时，angular-google-charts 会抛出错误，提示“期望 4 列而不是 5 列”

当我删除仅提供 4 列(组、行、开始、结束)的工具提示列时，时间轴可视化工作正常。然而，一旦我添加工具提示列，它就会抛出错误，指出期望 4 列，但收到 5 列。

组件.ts

type: string = 'Timeline'
chartData: Array<Array<any>> = [
  ['Group1', 'Row1', 'Tooltip1', new Date(2019, 01, 01), new Date(2019, 02, 01)],
  ['Group2', 'Row2', 'Tooltip2', new Date(2019, 03, 01), new Date(2019, 04, 01)]
]
colNames: Array<any> = ["Group", "Row", "Tooltip", "Start", "End"] 
colRoles: Array<any> = [
  { role: 'tooltip', type: 'string', index: 2, p: {html: true} },
]
options: {} = { tooltip: {isHtml: true} }

组件.html

<google-chart 
    [type]="type"
    [data]="chartData" 
    [options]="options" 
    [columnNames]="colNames"
    [roles]="colRoles">
</google-chart>

app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
...
imports: [
  GoogleChartsModule
],

我希望工具提示能够显示我在列索引 2 中放入的附加文本。请帮我解决这个问题。

Answer 1

不使用 Angular 时， Angular 色包含在列名称中。
我从来没有见过单独添加的 Angular 色。

尝试在列名称中添加 Angular 色，如下所示...

type: string = 'Timeline'
chartData: Array<Array<any>> = [
  ['Group1', 'Row1', 'Tooltip1', new Date(2019, 01, 01), new Date(2019, 02, 01)],
  ['Group2', 'Row2', 'Tooltip2', new Date(2019, 03, 01), new Date(2019, 04, 01)]
]
colNames: Array<any> = ["Group", "Row", { role: 'tooltip', type: 'string', p: {html: true} }, "Start", "End"] 
options: {} = { tooltip: {isHtml: true} }

并排除此处的 Angular 色...

<google-chart 
    [type]="type"
    [data]="chartData" 
    [options]="options" 
    [columnNames]="colNames"
</google-chart>