Highcharts Sparklines问题：tooltip取值与X轴统一缩放

问题1：修改Tooltip标题获取逻辑（首列从改为） #

原代码通过td.parentElement.querySelector('th').innerText获取Tooltip标题，现在只需将选择器改为该行第一个<td>即可，直接修改Tooltip的formatter函数：

tooltip: {
    formatter: function() {
        // 获取当前行首个td的文本作为标题
        const rowTitle = this.series.chart.renderTo.parentElement.querySelector('td:first-child').innerText;
        return `${rowTitle}: ${this.y}`;
    }
}

如果DOM结构稳定，也可以用更高效的children属性直接取值：

const rowTitle = this.series.chart.renderTo.parentElement.children[0].innerText;

问题2：统一Sparklines正负值起始点与缩放比例 #

要实现所有行X轴中点固定在0、正负值向两侧延伸且缩放比例一致，需先计算所有数据的全局最大绝对值，再统一设置所有图表的X轴范围：

1. 计算全局最大绝对值 #

遍历所有Sparkline数据，找出所有数值中的最大绝对值：

// 假设存储Sparkline数据的td带有类名sparkline，数据存在dataset.values中（格式如"5,-3,2"）
const sparklineCells = document.querySelectorAll('.sparkline');
let globalMaxAbs = 0;

sparklineCells.forEach(cell => {
    const data = cell.dataset.values.split(',').map(Number);
    const currentMaxAbs = Math.max(...data.map(Math.abs));
    globalMaxAbs = Math.max(globalMaxAbs, currentMaxAbs);
});

2. 配置Sparkline的X轴与样式 #

在Sparkline的全局配置中，将X轴的min设为-globalMaxAbs，max设为globalMaxAbs，确保所有图表的X轴范围完全一致，同时设置条形样式区分正负值：

Highcharts.SparkLine = function(a, b, c) {
    const hasRenderToArg = typeof a === 'string' || a.nodeName;
    const options = hasRenderToArg ? b : a;

    const baseOptions = {
        chart: {
            type: 'bar',
            spacing: [0, 0, 0, 0]
        },
        xAxis: {
            min: -globalMaxAbs,
            max: globalMaxAbs,
            lineWidth: 0,
            tickPositions: [-globalMaxAbs, 0, globalMaxAbs] // 可选：显示中点及两端刻度
        },
        yAxis: {
            visible: false
        },
        series: [{
            data: options.data,
            pointWidth: 12,
            color: point => point.y >= 0 ? '#27ae60' : '#c0392b'
        }],
        tooltip: {
            formatter: function() {
                const rowTitle = this.series.chart.renderTo.parentElement.querySelector('td:first-child').innerText;
                return `${rowTitle}: ${this.y}`;
            }
        },
        legend: { enabled: false },
        credits: { enabled: false }
    };

    return hasRenderToArg ? new Highcharts.Chart(a, Highcharts.merge(baseOptions, options), c) : new Highcharts.Chart(Highcharts.merge(baseOptions, options), c);
};

// 初始化所有Sparklines
sparklineCells.forEach(cell => {
    const data = cell.dataset.values.split(',').map(Number);
    Highcharts.SparkLine(cell, { data: data });
});

这样设置后，所有Sparkline的X轴中点固定在0，正值向右延伸、负值向左延伸，且因为X轴范围统一，不同行的条形长度会按相同比例缩放，数值越大条形越长。

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