使用 Angular .TS 在 Google 图表中显示价值

Question

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

我的问题是如何在图表中显示数据值，在 google 示例中给出为

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

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

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

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'],
  ...
];

使用 Angular .TS 在 Google 图表中显示价值

Show Value in Goole charts using Angular .TS

charts

google-visualization

angular