Google 折线图：仅显示选定的时间段？

Question

在我公司的主页上，我们使用名为 wpDataTables/wpDataCharts 的 WP 插件来显示许多表格和图表。在此页面，我们使用 Google Charts 折线图来显示 2007 年至 2019 年投资策略和可比指数的表现。

由于WP插件只允许轻度定制，我们使用回调函数来定制图表：

<script type="text/javascript">
jQuery(window).on('load',function(){ 
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[5] = function(obj){ 
        obj.options.chartArea = {left:80,right:0,top:30,width:'100%',height:'70%'};
        obj.options.focusTarget = ['category'];
    obj.options.hAxis.ticks = [{v: new Date(2008, 2, 15), f: '2008'}, {v: new Date(2009, 2, 15), f: '2009'}, {v: new Date(2010, 2, 15), f: '2010'}, {v: new Date(2011, 2, 15), f: '2011'}, {v: new Date(2012, 2, 15), f: '2012'}, {v: new Date(2013, 2, 15), f: '2013'}, {v: new Date(2014, 2, 15), f: '2014'}, {v: new Date(2015, 2, 15), f: '2015'}, {v: new Date(2016, 2, 15), f: '2016'}, {v: new Date(2017, 2, 15), f: '2017'}, {v: new Date(2018, 2, 15), f: '2018'}, {v: new Date(2019, 2, 15), f: '2019'}];
    obj.options.vAxis = {scaleType: 'log'}
    obj.options.vAxis.ticks = [{v: 50, f: '50%'}, {v: 100, f: '100%'}, {v: 250, f: '250%'}, {v: 500, f: '500%'}, {v: 1000, f: '1.000%'}, {v: 2000, f: '2.000%'}];
}
});
</script>

假设您于 2010 年 1 月 1 日投资了该策略。在这种情况下，您有兴趣了解 2010 年 1 月 1 日及以后投资策略的表现。如 2010 年 1 月 1 日所示，策略和指数的值均为 100%，图表仅显示该日期之后的数据。

这样的东西可以做吗？它需要一个字段，用户可以在其中选择一个日期，然后图表会更改为在该日期之前从 100% 开始。

我希望这个问题有意义。任何意见都将不胜感激。

最好的， 莫滕

Answer 1

要在 Google 图表中仅显示选定的时间段，您可以根据用户的日期选择过滤数据并动态更新图表。

// Assume `originalData` is your original data set
let originalData = [
  // your original data
];

// HTML input field for date selection
// <input type="date" id="startDate" />

document.getElementById("startDate").addEventListener("change", function() {
  let selectedDate = new Date(this.value);
  let filteredData = originalData.filter((row) => {
    return new Date(row[0]) >= selectedDate;
  });

  // Reset first data point to 100%
  if (filteredData.length > 0) {
    filteredData[0][1] = 100;  // Assume the investment value is in column index 1
  }

  // Update the chart with filtered data
  obj.draw(google.visualization.arrayToDataTable(filteredData), obj.options);
});

将

originalData

替换为您的数据。