使用Angular.TS在谷歌图表中显示值

Question

我在Angular起诉谷歌图表，在尝试应用谷歌文档示例时遇到了一些困难，因为我是前端新手，对JS不太熟悉，在Angular中使用TS。

我的问题是如何在图表中显示数据值，在谷歌的例子中，它被称为

var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);

但由于我使用TS，我不确定如何应用相同的功能，我尝试了很多东西，检查了多个表单，但所有表单都几乎使用JS，目前正在部署的图表如下

.TS ==>
Daigram1Type = "ColumnChart"
chartColumns = ['Day', 'P3', 'P1',  'P3', 'P1', 'P3', 'P1'];
Diagram1Data = [

['Mon', 25, 11,5,27, 30,23],
['Tue', 20, 0,0,27, 30,23],
['Wed', 27, 30,1,27, 30,23],
['Thu', 30, 23,1,27, 30,23],
['Fri', 20, 20,1,27, 30,23],
['Sat', 7,10,0,0,0,0],
['Sun', 8,5,0,0,0,0],
];
Diagram1Options = { 
legend: 'none', 
isStacked:true,
displayAnnotations: true,
colors: ['green', '#cc0000', 'transparent', 'green', '#cc0000', 'transparent','green', '#cc0000', 'transparent'],
};
HTML ==>
<google-chart [type]="Daigram1Type" [data]="Diagram1Data" [options]= "Diagram1Options" [columns]="chartColumns"></google-chart>

Answer 1

您提供的示例使用数据视图来添加注释列
但是，注释可以直接添加到数据表中。

您需要在每个应该显示其值的列标题之后添加注释列角色。

chartColumns = [
'Day',
'P3', {type: 'string', role: 'annotation'},
'P1', {type: 'string', role: 'annotation'},
'P3', {type: 'string', role: 'annotation'},
'P1', {type: 'string', role: 'annotation'},
'P3', {type: 'string', role: 'annotation'},
'P1', {type: 'string', role: 'annotation'}
];

以及要在行数据中显示的值。。。

Diagram1Data = [    
['Mon', 25, '25', 11, '11', 5, '5', 27, '27', 30, '30', 23, '23'],
['Tue', 20, '20', 0, '0', 0, '0', 27, '27', 30, '30', 23, '23'],
...
];