Javascript 海图-面积图：自定义工具提示

我正在尝试自定义面积图的工具提示。我用这个

我正在面积图中绘制3个系列。我的要求是在图表中的固定位置显示工具提示，该位置位于上止点。现在，当我将光标放在任意点上时，工具提示应该显示所有系列名称及其光标所在的当前值。请参阅下图：

目前，我能够在顶部中心显示工具提示，将鼠标放在任何位置都会显示当前系列名称和数据，但它会在所有3个位置显示当前系列名称

Highchart选项：

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'ACCUMULATED WEALTH'
    },
    xAxis: {
        categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
        tickmarkPlacement: 'on',
        crosshair: {
            width: 1,
          color: "#ccc"
                },
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: false
        },
        opposite: true,
        labels: {
            formatter: function() {
              return '$' + this.value + 'k';
          }
        },
    },
    tooltip: {
      backgroundColor: 'none',
      borderWidth: 0,
      shadow: false,
      useHTML: true,
      shared: true,
      padding: 0,
      split: false,
      headerFormat: "",
      pointFormat: '<table><tr><td>{point.y}</td><td>{point.y}</td><td>{point.y}</td></tr>' +
      '<tr><td>{series.name}</td><td>{series.name}</td><td>{series.name}</td></tr></table>',
      footerFormat: "",
      positioner: function () {
        return { x: 250, y: 25 };
      }
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [{
        name: 'Cash Flow',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]
    }, {
        name: 'Appreciation',
        data: [ 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
    }, {
        name: 'Principal',
        data: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33]
    }]
});

Highcharts.chart（'container'{
图表：{
类型：“区域”
},
标题：{
正文：“积累财富”
},
xAxis：{
类别：[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]，
勾选位置：“on”，
十字线：{
宽度：1，
颜色：“ccc”
},
标题：{
已启用：false
}
},
亚克斯：{
标题：{
文本：false
},
相反：是的，
标签：{
格式化程序：函数（）{
返回“$”+this.value+“k”；
}
},
},
工具提示：{
背景颜色：“无”，
边框宽度：0，
影子：错，
是的，
分享：是的，
填充：0，
split:false，
首字母：“，
pointFormat:“{point.y}{point.y}{point.y}”+
{series.name}{series.name}{series.name}，
页脚格式：“”，
定位器：功能（）{
返回{x:250，y:25}；
}
},
打印选项：{
面积：{
堆叠：“正常”，
线条颜色：'#666666'，
线宽：1，
标记：{
线宽：1，
线条颜色：“#666666”
}
}
},
系列：[{
名称：“现金流”，
数据：[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
}, {
名称:"感谢",，
数据：[2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
}, {
姓名：'委托人'，
数据：[3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,32,33]
}]
});

以下是我迄今为止所做的尝试：

---

请帮忙。提前谢谢

如果没有

工具提示.formatter

，可能很难达到预期的结果

以下是如何在格式化程序中生成工具提示文本：

  formatter: function(tooltip) {
    const points = this.points;
    let str = '<table><tr>';

    points.forEach(point => {
      str += '<td style="text-align:center">' + point.y + '</td>';
    });

    str += '</tr><tr>';

    points.forEach(point => {
      str += '<td><span style="font-size:20px;color:' + point.color + '">●</span> ' + point.series.name + '</td>';
    });

    str += '</tr></table>';

    return str;
  },

示例和输出

---

您可以使用

pointFormat

方法实现所需的结果
这就是你可以使用它的方式

pointFormat: '<table style="text-align:center; display: inline-block; background: white;"><tr><td>{point.y}</td></tr>' +
  '<tr><td><span style="font-size:20px;color:{series.color}">●</span> {series.name}</td></tr></table>',

positioner: function () {
    const chart = this.chart;        
    return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop - 20 };
  }

pointFormat:“{point.y}”+
'● {series.name}'，
定位器：功能（）{
const chart=this.chart；
返回{x:（chart.plotWidth+chart.marginRight-this.label.getBBox（）.width）/2，y:chart.plotTop-20}；
}

---

对于JSFIDLE示例

我看到它显示了所有3个系列，但每个系列显示3次，因为您有一个具有相同3个表单元格（{series.name}{series.name}{series.name}），如果只留下其中一个，它似乎工作正常，或者我误解了问题？

pointFormat: '<table style="text-align:center; display: inline-block; background: white;"><tr><td>{point.y}</td></tr>' +
  '<tr><td><span style="font-size:20px;color:{series.color}">●</span> {series.name}</td></tr></table>',

positioner: function () {
    const chart = this.chart;        
    return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop - 20 };
  }