CanvasJS折线图实现X轴标签与数据点悬停显示不同内容

我来帮你搞定这个需求，刚好CanvasJS有原生配置就能实现，不用额外折腾复杂逻辑。以下是分步解决方案：

1. 自定义悬停提示，替换X轴内容为日期 #

CanvasJS允许通过toolTipContent属性自定义数据点的悬停文本，直接调用你存在name字段里的日期即可。你可以在数据系列中配置这个属性，该系列下所有点都会套用这个模板。

2. 隐藏数据点上方的索引标签 #

只需要在数据系列里添加indexLabel: ""（空字符串），就能直接禁用数据点上方的标签显示，完全匹配你的需求。

3. 保留X轴的预设数字标签 #

你之前设置的label字段（存储预设数字）不用改动，CanvasJS的X轴会自动用这个字段渲染下方的标签，完美保留你要的效果。

修改后的完整代码示例 #

图表初始化代码

const chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Market price from days to event"
    },
    axisY: [{
        title: "Market Price",
        lineColor: "#C24642",
        tickColor: "#C24642",
        labelFontColor: "#C24642",
        titleFontColor: "#C24642",
        prefix: "$"
    }],
    axisX: [{
        title: "Days to event",
        reversed: true
    }],
    data: data // 这里的data是修改后的系列数据
});
chart.render();

数据系列生成代码

// 假设tix_data、color_arr等变量已提前定义
data = [];
let axisYIndex = 0; // 根据你的实际逻辑调整

Object.keys(tix_data).forEach((key, i) => {
    const seriesDataPoints = Object.values(tix_data[key]).map((item, idx) => {
        return {
            y: item.someDollarAmount, // 你的金额数值
            label: idx, // X轴下方显示的预设数字标签
            name: item.someDate // 存储的日期，用于悬停提示
        };
    });

    data.push({
        type: "spline",
        name: key,
        color: color_arr[i],
        showInLegend: true,
        axisYIndex: axisYIndex,
        indexLabel: "", // 隐藏数据点上方的索引标签
        toolTipContent: "({name}: ${y})", // 自定义悬停提示，显示日期和金额
        dataPoints: seriesDataPoints
    });
});

关键说明 #

• toolTipContent里的{name}会自动读取每个dataPoint的name字段值（也就是你存储的日期），{y}对应金额数值，前缀$可以根据需求保留或移除。
• indexLabel: ""直接禁用了数据点上方的标签，无需额外处理。
• X轴依然使用label字段的数字渲染，完全满足你"X轴下方显示预设数字标签"的要求。

这样配置后，鼠标悬停数据点时会显示(2022-09-20: $344)（或你调整后的格式），X轴下方显示预设数字，同时不会看到数据点上方的索引标签，完美复用CanvasJS原生悬停功能。

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