angular2-google-chart指定typescript中的列类型

时间:2017-05-13 04:57:44

标签: angular typescript charts

我正在尝试从Google图表的angular2-google-chart模块中获取时间轴图表。它不是其中一个示例,此特定图表类型需要列的类型定义 - 这些示例都不需要。我能找到的所有示例都是直接在JavaScript中设置类型。我无法弄清楚如何在TypeScript中指定列类型。

错误是“无效的数据表格式:列#1必须是'string'类型。”

这是JavaScript示例页面:https://developers.google.com/chart/interactive/docs/gallery/timeline

dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

所有angular2-google-chart示例都使用如下数据:

public candle_ChartData = [
        ['Day', 'Low', 'Opening value', 'Closing value', 'High'],
        ['Mon', 28, 28, 38, 38],
        ['Tue', 38, 38, 55, 55],
        ['Wed', 55, 55, 77, 77],
        ['Thu', 77, 77, 66, 66],
        ['Fri', 66, 66, 22, 22]
    ];

我需要的是指定'Day'应为'type: string, id: Day'

的方法

看起来这可能不受支持,我将不得不修改他们提供的指令以添加列输入。但很明显,如果我不需要,我宁愿不花那么多时间。

https://github.com/vimalavinisha/angular2-google-chart/blob/master/directives/angular2-google-chart.directive.ts

1 个答案:

答案 0 :(得分:0)

所以我在输入问题后不久就找到了答案。在文档中,我只是找不到合适的位置。

https://developers.google.com/chart/interactive/docs/datatables_dataviews

这是必需的格式:

public timeline_ChartData = [
    [ {label: 'President', id: 'President', type: 'string'}, 
      {label: 'Start', id: 'Start', type: 'date'},
      {label: 'End', id: 'End', type: 'date'}  ],
        [ 'Washington', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
        [ 'Adams',      new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
        [ 'Jefferson',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]
  ];