如何在Google时间线图表中显示特定年份?

时间:2016-09-03 16:44:38

标签: javascript reactjs charts google-visualization

使用react-google-charts,我想指定哪些年份应显示在Google时间线图表的横轴上。屏幕截图显示了一个使用自动生成的值的示例,基于行的给定时间范围。

该示例使用以下数据:

[
  [ '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) ]
]

Timeline Chart Example with automatically generated years on horizontal axis

我已经尝试了以下选项而没有任何乐趣:

hAxis: {
    title: 'Year',
    minValue: new Date(1785, 3, 15),
    maxValue: new Date(1825, 3, 15),
    ticks: [
      { v: new Date(1792, 3, 15), f: '1792' },
      { v: new Date(1818, 3, 15), f: '1818' },
      { v: new Date(1824, 3, 15), f: '1824' }
    ]
}

我希望x轴标有“年”,并显示1792,1818和1824而不是1790和1800。 minValue和maxValue选项似乎也被忽略了。

根据readme它应该有效。

问题是关于值是date-objects而不是整数?

修改:添加了一个jsfiddle:http://jsfiddle.net/s4zg7mxt/ 它没有使用react-google-charts,但问题仍然是相同的:ticks(和title)选项仍然没有效果。有趣的是,尽管考虑了minValue和maxValue选项。 是否有可能调整jsfiddle,以便在水平轴上显示指定的年份?

2 个答案:

答案 0 :(得分:1)

我发现配置选项或其他功能是否未在该特定图表的指南中列出,
图表不支持它。

以外的更新版本中添加的选项,
其中该图表的指南尚未更新。

因此,时间轴图表上唯一可用的hAxis选项为minValuemaxValue

提供October 2, 2015 release

  

<强>时间轴:
   - 持续时间现已本地化    - 现在支持水平轴minValuemaxValue

答案 1 :(得分:0)

库会根据开始日期,结束日期和浏览器的显示区域自动计算x轴的缩放比例。 请粘贴完整代码,检查并更新您是否可以自定义缩放x轴。