billboard.js自定义索引标签替换0-n序列为日期的实现问题

你直接修改onover回调返回的d对象会触发报错的核心原因是：d是billboard.js内部用于数据计算、坐标渲染的只读实例，直接修改属性会破坏内部校验和运算逻辑，完全不推荐这种实现方式。

最优方案：用官方配置自定义Tooltip标题 #

billboard.js提供了原生的tooltip格式化配置，不需要修改内部数据即可自定义悬浮展示的x轴标签：

// 提前提取日期索引映射
const dateMap = ajax_result.data.map(item => item.My_Index)

bb.generate({
  // 其余基础配置保持不变
  tooltip: {
    format: {
      title: function(x) {
        // x为默认的0-n索引，直接返回对应日期即可
        return dateMap[x]
      }
    }
  }
})

可选方案：初始化时直接配置x轴为分类轴 #

如果希望x轴刻度直接显示日期而非0-n索引，初始化时直接指定x轴为分类类型即可：

const dateList = ajax_result.data.map(item => item.My_Index)

bb.generate({
  data: {
    columns: [
      // 你的y轴数据列
      ['data1', 30, 200, 100, 400, 150, 250]
    ]
  },
  axis: {
    x: {
      type: 'category',
      categories: dateList,
      // 日期较多时可旋转刻度避免重叠
      tick: {
        rotate: 45
      }
    }
  }
})

特殊场景：onover回调内获取选中日期的正确写法 #

如果需要在悬浮时同步更新图表外的日期展示，不要修改d对象本身，直接读取索引取对应日期即可：

onover: function(d, element) {
  const selectedDate = ajax_result.data[d.index].My_Index
  // 仅用于外部逻辑，不修改d对象
  document.querySelector('#current-date').textContent = selectedDate
}

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