如何解决更改 X 轴后更正 ngx-echarts 工具提示位置
我尝试设置两个图表来比较来自 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 轴的最小值或最大值,因此最终两者具有相同的范围。为了显示效果,我截取了一个演示数据图表:
可以看到数据点是一样的,但是位置不对。有什么办法可以将工具提示移回轴的正确点,分别重新同步两者的位置?
提前致谢
编辑:
接下来我尝试的是在清除每个图表后使用 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 举报,一经查实,本站将立刻删除。