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

Question

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

应用程序模块.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>