如何隐藏Google LineChart低于1的线段及0值数据点并解决DataView异常

核心逻辑说明 #

你之前使用view.setRows()过滤整行的方案会误删数据，是因为该操作会直接移除整个时间点的所有系列数据，只要某一列不符合过滤条件，其他列的有效数据也会被一起删掉。
要实现仅隐藏单系列低于1的折线段和0值点，正确的做法是将每个系列中小于1的值替换为null：Google LineChart遇到null值时会自动断开对应位置的折线，且不会渲染null值对应的数据点，完全符合你的需求。

具体修改代码 #

只需要修改你原有代码中view.setColumns()部分，将原来直接引用的1-9列全部改为计算列，过滤小于1的值：

let view = new google.visualization.DataView(dataYear);
// 生成计算列配置
const columns = [{
    calc: function(dataYear, row) {
        return new Date(dataYear.getValue(row, 0));
    },
    label: dataYear.getColumnLabel(0),
    type: 'date'
}];
// 批量处理1-9列的数值过滤
for (let colIndex = 1; colIndex <=9; colIndex++) {
    columns.push({
        calc: (dataYear, row) => {
            const val = dataYear.getValue(row, colIndex);
            // 小于1的值返回null，自动隐藏折线和点
            return val >= 1 ? val : null;
        },
        label: dataYear.getColumnLabel(colIndex),
        type: dataYear.getColumnType(colIndex)
    });
}
view.setColumns(columns);
// 不需要再调用setRows过滤整行，避免误删有效数据

补充说明DataView过滤规则 #

• getFilteredRows()支持传入多列过滤条件，数组内多个条件默认是AND逻辑，示例：

// 同时过滤列1和列2都满足>=1的行
view.getFilteredRows([
    {column: 1, minValue:1},
    {column:2, minValue:1}
])

• 若需要更复杂的过滤逻辑，可以使用test函数自定义判断规则。
• 你之前遇到的hAxis设置minValue:1报错，是因为hAxis为日期类型，最小阈值需要传入Date对象而非数字，无特殊需求可以保留现有配置。

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