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

标签 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它应该工作。

问题是否与值是日期对象而不是整数有关?

编辑: 添加了一个 jsfiddle:http://jsfiddle.net/s4zg7mxt/ 它没有使用 react-google-charts,但问题仍然存在:刻度(和标题)选项仍然无效。有趣的是,虽然考虑了 minValue 和 maxValue 选项。 是否有可能调整 jsfiddle,以便在水平轴上显示指定的年份?

最佳答案

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

除了最近版本中添加的选项,
其中该图表的指南尚未更新。

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

October 2, 2015 release 一起提供

Timeline:
-- Durations are now localized.
-- Now supports minValue and maxValue for the horizontal axis.

关于javascript - 如何在 Google 时间线图表中显示特定年份?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39309197/

相关文章:

javascript - 已知像素变化时的 Canvas 优化

reactjs - 如何将自定义组件传递给 MUI 工具提示中的标题 Prop ?

javascript - Highcharts : Center text in plot option in column chart

c# - 在图表中添加 x 轴字符串值而不是数字

javascript - dc.js 按 y 轴/值排序顺序折线图

javascript - 在字段模糊/焦点丢失时使用 jQuery 更新表单字段的错误样式

javascript - CSS显示类型: Tabs

javascript - 如何在 mixins 上的扩展/继承情况下正确定义 Node.js 模块的 JSDoc

javascript - 单选按钮值的功能无法正常工作 - React Native

javascript - React setState + 'prevState' 从哪里来?