更改 X 轴后更正 ngx-echarts 工具提示位置

编程问答 2022-05-01

问题描述

我尝试设置两个图表来比较来自 CSV 的数据。一切正常，每个图表接收数据并显示它。 CSV 包含随时间变化的数据，但时间范围可能不同。因此，为了获得连贯的外观（与公共时间范围重叠）以让查看者不必检查相应时间点在另一个图表上的位置来显示数据，我更改了 x 轴范围。

这也很好用。如果两个文件具有共同的时间范围，则它们将在彼此之上显示相同的时间点（例如，顶部图表中的 12:00:00 将与下方图表中的时间点完全相同）。并且“缺席时间”将正确显示为空白。

但现在工具提示不再同步。它们显示正确的值，但位置错误。我认为它被放置在它应该在轴改变之前出现的地方。这会产生副作用，如果用户放大并且图表“认为”工具提示在可见范围之外，则不会再显示一个工具提示。

我尝试断开并重新连接两个图表，以使它们重新同步位置，但这并没有太大作用。我为匹配 x 轴所做的工作如下：

  adjustXaxis(targetChart: ECharts,minDate,maxDate) {
    const tChartId = targetChart.id;
    let compChartOption;
    disconnect(targetChart.group);

    for (let i = 0; i < this.charts.length; i++) {
      compChartOption = this.charts[i].getoption();
      const compSeries = compChartOption.series[0];

      if (this.charts[i].id !== tChartId) {
        if (compSeries.data[0][0] < minDate) {
          targetChart.setoption({ xAxis: { min: compSeries.data[0][0] } });
        } else {
          this.charts[i].setoption({ xAxis: { min: minDate } });
        }

        if (compSeries.data[compSeries.data.length - 1][0] > maxDate) {
          targetChart.setoption({ xAxis: { max: compSeries.data[compSeries.data.length - 1][0] } });
        } else {
          this.charts[i].setoption({ xAxis: { max: maxDate } });
        }
      }
    }
    connect(this.charts);
  }

我遍历图表并获取系列数据。现在我比较第一个点的时间-日期是否低于活动系列的最小值，然后我将最后一个点的时间-日期与活动系列的相应点进行比较。

在任何一种情况下，我都会设置 x 轴的最小值或最大值，因此最终两者具有相同的范围。为了显示效果，我截取了一个演示数据图表：

Demo

可以看到数据点是一样的，但是位置不对。有什么办法可以将工具提示移回轴的正确点，分别重新同步两者的位置？

提前致谢

编辑：

接下来我尝试的是在清除每个图表后使用 setoption(option,true) 完全重绘每个图表。它导致更简单的代码并且可以很好地绘制图表，但工具提示仍然具有与之前点的偏移量。所以现在代码看起来像：

  adjustXaxis(targetChart: ECharts,maxDate) {
    let compChartOption;
    let newChartOption: EChartsOption = this.chartOption;
    let axisMin = minDate;
    let axisMax = maxDate;

    for (let i = 0; i < this.charts.length; i++) {
      compChartOption = this.charts[i].getoption();
      const compSeries = compChartOption.series[0];

      if (compSeries.data.length > 0) {
        axisMin = Math.min(axisMin,compSeries.data[0][0]);
        axisMax = Math.max(axisMax,compSeries.data[compSeries.data.length - 1][0]);
      }
    }

    disconnect(targetChart.group);
    for (let i = 0; i < this.charts.length; i++) {
      compChartOption = this.charts[i].getoption();
      this.charts[i].clear();
      if (compChartOption.series.length > 0) {
        newChartOption.xAxis = {
          type: 'time',min: new Date(axisMin),max: new Date(axisMax)
        }
        newChartOption.series = compChartOption.series

        this.charts[i].setoption(newChartOption,true);
      }
    }
    connect(this.charts);
  }

如您所见，我清除了每个图表，然后使用数据集重新绘制它并更正 x 轴的最小值和最大值。图片还是和上面一样，我悬停的图表工具提示正确显示，另一个是偏移量，如果放大会导致显示丢失。

还有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularechartsechartsngx-echarts