关于dygraph：能否仅在有数值的点生成X轴标签？

当然可以实现这个需求，你可以通过dygraph的axes.x.tickGenerator自定义函数控制X轴标签的生成逻辑，只在存在对应数值的点位置输出标签。

以下是具体的代码示例：

// 示例数据，X轴为日期，Y轴存在空值
const data = [
  [new Date("2024-01-01"), 10],
  [new Date("2024-01-02"), null],
  [new Date("2024-01-03"), 20],
  [new Date("2024-01-04"), null],
  [new Date("2024-01-05"), 15]
];

new Dygraph(document.getElementById("graph"), data, {
  axes: {
    x: {
      tickGenerator: function(axis, dygraph, vals, opts) {
        const validXValues = [];
        // 遍历所有数据行，筛选出有有效数值的X点
        for (let i = 0; i < dygraph.numRows(); i++) {
          const row = dygraph.getValue(i);
          // 判断该行是否存在非null/undefined的Y值
          const hasValidValue = row.slice(1).some(val => val != null);
          if (hasValidValue) {
            validXValues.push(row[0]);
          }
        }
        // 生成符合要求的tick数组
        return validXValues.map(xVal => ({
          v: xVal.valueOf(),
          label: dygraph.strftime(xVal, opts.tickFormatter)
        }));
      },
      // 自定义X轴标签的显示格式
      tickFormatter: function(date) {
        return new Date(date).toLocaleDateString();
      }
    }
  }
});

说明 #

• 核心逻辑是通过tickGenerator遍历数据，只保留那些存在有效Y值的X轴点，再为这些点生成标签。
• 如果你的数据是多系列（多个Y值列），row.slice(1).some(...)会确保只要有一个系列在该X点有数值，就生成对应的标签。
• 你可以根据实际需求调整tickFormatter来修改标签的显示格式，比如显示时间戳、自定义日期格式等。

内容的提问来源于stack exchange，提问作者장유신