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

Question

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

当我删除仅提供 4 列（组、行、开始、结束）的工具提示列时，时间轴可视化效果很好。但是，一旦我添加工具提示列，它就会抛出错误，提示需要 4 列但收到 5 列。

component.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} }

component.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 时，角色包含在列名称中。
我从未见过单独添加的角色。

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

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} }

并排除此处的角色...

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

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

How to add 'tooltip' to Timeline chart in angular-google-charts?

javascript

charts

google-visualization

angular

component.ts

component.html

app.module.ts