使用NVD3.js绘制OHLC图表遇坐标轴格式化问题，数据显示异常

我来帮你排查下用NVD3.js绘制OHLC图表时遇到的显示问题～从你描述的情况和代码片段来看，大概率是数据结构不符合OHLC图表要求或者时间轴格式处理错误导致的，下面一步步来解决：

1. 先修正OHLC图表的数据结构 #

NVD3的OHLC图表对数据格式有严格要求：每个数据点需要包含「时间戳、开盘价、最高价、最低价、收盘价」五个值，并且所有数据要放在同一个series下，而不是像你现在这样把Open、High等拆成单独的series。

举个正确的数据结构示例：

const correctData = [{
  "key": "Stock OHLC",
  "values": [
    [1512432000000, 55.65, 56.2, 54.1, 55.0], // [时间戳(毫秒), 开盘, 最高, 最低, 收盘]
    [1512518400000, 54.45, 55.1, 53.8, 54.7],
    // 其他时间点数据...
  ]
}];

你需要把API返回的Open、High、Low、Close四个数据集，按时间戳对应合并成上面的结构。比如可以用时间戳作为键，把四个价格值整合到同一个数组里。

2. 处理时间戳格式 #

你的数据里的时间戳是秒级的（比如1512432000），但NVD3的时间轴需要的是毫秒级的时间戳（或者直接传入Date对象），所以必须把每个时间戳乘以1000：

// 假设你已经解析了API返回的JSON数据
const parsedData = JSON.parse(dataSet);
// 这里先按时间戳合并四个series的逻辑（示例）
const timeMap = {};
// 遍历每个价格类型的series
parsedData.data.forEach(series => {
  const priceType = series.key; // Open/High/Low/Close
  series.values.forEach(point => {
    const timestamp = point[0] * 1000; // 转成毫秒级
    if (!timeMap[timestamp]) {
      timeMap[timestamp] = [timestamp];
    }
    // 根据价格类型对应到数组的第1-4位（开盘=1，最高=2，最低=3，收盘=4）
    const index = priceType === 'Open' ? 1 : priceType === 'High' ? 2 : priceType === 'Low' ? 3 : 4;
    timeMap[timestamp][index] = point[1];
  });
});
// 转成OHLC需要的数组格式
const ohlcData = [{
  key: 'Stock OHLC',
  values: Object.values(timeMap)
}];

3. 配置坐标轴的格式化函数 #

最后在初始化图表时，明确指定X轴为时间轴，同时配置合适的格式化规则：

nv.addGraph(function() {
  const chart = nv.models.ohlcChart()
    .x(function(d) { return new Date(d[0]); }) // 把时间戳转成Date对象
    .y(function(d) { return d[1]; });

  // 配置X轴的日期显示格式，比如显示YYYY-MM-DD
  chart.xAxis
    .tickFormat(function(d) {
      return d3.time.format('%Y-%m-%d')(new Date(d));
    });

  // 配置Y轴的价格显示，保留两位小数并加上$符号
  chart.yAxis
    .tickFormat(function(d) {
      return '$' + d.toFixed(2);
    });

  // 渲染图表
  d3.select('#chart svg')
    .datum(ohlcData)
    .call(chart);

  // 监听窗口大小变化，自动更新图表
  nv.utils.windowResize(chart.update);
  return chart;
});

按照这三步调整后，你的OHLC图表应该就能正常显示数据了～

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