如何在Dygraph中调用原始numberValueFormatter默认格式化器？

问题描述 #

我配置了一个带有自定义valueFormatter的Dygraph，希望对"Pass"系列显示自定义文本，其他系列使用官方默认的数字格式化器。目前的实现要么通过内部属性this.attrs_.axes.y.valueFormatter调用，要么用临时方案把原始格式化器存到实例上，想知道官方推荐的调用方式。

原始自定义格式化器代码：

axes: {
    y: {
        valueFormatter: function(val, opts, seriesName, dygraph, row, col) {
            if (seriesName === "Pass") {
                return val > 0 ? "Pass" : "Fail";
            } else {
                var x = this.attrs_.axes.y.valueFormatter(val, opts);
                return x;
            }
        },
    }
},

临时方案代码：

g = new Dygraph(
    document.getElementById("graphdiv"),
    TheDataForDygraph,
    {
        series: {
            Pass: {
                drawPointCallback: Dygraph.Circles.HEXAGON,
                pointSize: 5,
                drawHighlightPointCallback: Dygraph.Circles.STAR,
                highlightCircleSize: 3,
            },
        },
        axes: {
            y: {
                valueFormatter: function(val, opts, seriesName, dygraph, row, col) {
                    if (seriesName === "Pass") {
                        return val > 0 ? "Pass" : "Fail";
                    } else {
                        var x = this.numberValueFormatter(val, opts);
                        return x;
                    }
                },
            }
        },
        labels: TheLabelsForDygraph,
        ylabel: 'Measurements',
    }
);

// 临时方案，暂不知其他获取原始格式化器的方式
g.numberValueFormatter = g.attrs_.axes.y.valueFormatter;

官方推荐的解决方案 #

方式一：直接调用公开的默认格式化器 #

Dygraph将默认数字格式化器公开在Dygraph.Utils命名空间下，你可以直接在自定义函数中调用Dygraph.Utils.numberValueFormatter，无需依赖内部未公开属性：

axes: {
    y: {
        valueFormatter: function(val, opts, seriesName, dygraph, row, col) {
            if (seriesName === "Pass") {
                return val > 0 ? "Pass" : "Fail";
            } else {
                // 直接调用官方默认数字格式化器
                return Dygraph.Utils.numberValueFormatter(val, opts);
            }
        },
    }
},

方式二：预存实例默认格式化器（适配全局配置修改场景） #

如果你的项目中存在全局修改Dygraph默认配置的情况，需要确保使用当前实例的默认格式化器，可以在创建实例前先获取默认轴配置：

// 获取Dygraph默认的Y轴配置
const defaultYAxisConfig = Dygraph.getDefaultValue('axes', 'y');
// 保存默认的valueFormatter
const defaultYFormatter = defaultYAxisConfig.valueFormatter;

g = new Dygraph(
    document.getElementById("graphdiv"),
    TheDataForDygraph,
    {
        series: {
            Pass: {
                drawPointCallback: Dygraph.Circles.HEXAGON,
                pointSize: 5,
                drawHighlightPointCallback: Dygraph.Circles.STAR,
                highlightCircleSize: 3,
            },
        },
        axes: {
            y: {
                valueFormatter: function(val, opts, seriesName, dygraph, row, col) {
                    if (seriesName === "Pass") {
                        return val > 0 ? "Pass" : "Fail";
                    } else {
                        // 使用预存的实例默认格式化器
                        return defaultYFormatter(val, opts);
                    }
                },
            }
        },
        labels: TheLabelsForDygraph,
        ylabel: 'Measurements',
    }
);

这两种方式都比临时方案更稳定，不会因为Dygraph内部结构变更导致代码失效。

内容的提问来源于stack exchange，提问作者Xan-Kun Clark-Davis