如何让Google折线图仅展示选定时间段的内容？

完全可以实现你需要的功能，下面是具体的实现步骤和代码示例：

1. 添加日期选择器到页面 #

首先在图表上方的合适位置添加日期选择输入框，让用户能选择起始日期：

<div style="margin-bottom:15px;">
  <label>选择起始日期：</label>
  <input type="date" id="chartStartDate" min="2007-01-01" max="2019-12-31" value="2010-01-01">
  <button id="updateChartBtn">更新图表</button>
</div>

2. 修改图表回调函数，实现数据过滤与归一化 #

修改原有的wpDataChartsCallbacks代码，结合日期选择器的事件，完成两个核心操作：

• 过滤掉用户选择日期之前的所有数据
• 将选择日期的策略/指数值设为100%，后续所有数据按该基准做归一化计算

修改后的完整代码如下：

jQuery(window).on('load',function(){ 
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 

    // 定义图表更新逻辑
    function updateChart(startDate) {
        const chartInstance = wpDataCharts.charts[5];
        if (!chartInstance) return;

        // 复制原始数据避免污染源数据
        const originalData = [...chartInstance.data];
        const targetDate = new Date(startDate);

        let baseStrategyValue = null;
        let baseIndexValue = null;
        // 过滤目标日期及之后的数据，同时记录基准值
        const filteredData = originalData.filter(row => {
            const rowDate = new Date(row[0]);
            if (rowDate >= targetDate) {
                // 匹配到目标日期时记录基准值
                if (!baseStrategyValue && rowDate.toDateString() === targetDate.toDateString()) {
                    baseStrategyValue = row[1];
                    baseIndexValue = row[2];
                }
                return true;
            }
            return false;
        });

        // 归一化数据并更新图表
        if (baseStrategyValue && baseIndexValue) {
            const normalizedData = filteredData.map(row => {
                return [
                    row[0],
                    (row[1] / baseStrategyValue) * 100,
                    (row[2] / baseIndexValue) * 100
                ];
            });
            chartInstance.data = normalizedData;
            chartInstance.drawChart();
        }
    }

    // 初始化图表配置+绑定事件
    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%'}];

        // 绑定更新按钮事件
        jQuery('#updateChartBtn').on('click', function() {
            const selectedDate = jQuery('#chartStartDate').val();
            if (selectedDate) updateChart(selectedDate);
        });

        // 页面加载后默认以2010-01-01为起点
        updateChart('2010-01-01');
    }
});

关键说明 #

• 数据处理：遍历原始数据筛选目标日期后的记录，将每条数值除以目标日期的基准值再乘以100，得到相对100%的表现值
• 图表更新：调用drawChart()重新渲染，确保修改后的数据生效
• 兼容性：基于WP环境已有的jQuery和wpDataTables API开发，无需额外引入依赖

内容的提问来源于stack exchange，提问作者Morten