时间戳

首页 > 解决方案 > 在 LightningChart JS 的工具提示上添加其他字段，包括 xvalue 和 yvalue

javascript - 在 LightningChart JS 的工具提示上添加其他字段，包括 xvalue 和 yvalue

问题描述

我正在添加这样的图表

 for (let tpName in tpGroupedData) {
      this.series = this.chartInstance
           .addPointSeries({ pointShape: shapes[shapeIndex], dataPattern: lsjs.DataPatterns.horizontalProgressive, xAxis: createdAxis })
           .setPointFillStyle((solidFill) => solidFill.setColor(lsjs.ColorHEX(palette.simpleSet[seriesColorIndex])))
           .setName(groupTag.slice(0, groupTag.indexOf('(')) + '( ' + tpName + ' )');

        for (let dataItem of tpGroupedData[tpName]) {
          this.series.add({ x: Date.parse(dataItem.testDateTime) - dateOrigin, y: dataItem.value })
        }

在工具提示上，我还想添加 dataItem 的其他值，而不仅仅是显示 x 和 y 坐标

标签： javascriptlightningchart

解决方案

您可以通过使用自定义设置系列的 resultTableFormatter 来显示您想要的数据。

您可以通过使用TableContentBuilder来做到这一点，如下所示：

series.setResultTableFormatter((builder, series, segment) => {
  return builder
    .addRow(series.getName())
     // Get the data from the series X value, use formatting from Axis TickStrategy
    .addRow(series.axisX.formatValue(segment.getPosition()))
    // Add additional row. A single string will be centered horizontally in the resultTable.
    .addRow('Additional data: ' + dataToShow ))
    // Add additional row. Undefined or '' marks a gap, which will fill any extra space of row. Here the first string will be anchored to the left; third string is anchored to the right of the resultTable.
    .addRow('More data', undefined, dataToShow)
} )

推荐阅读