如何摆脱HighCharts Scatterplot放大的屏幕上的预览?
我使用 Highcharts 来显示多个数据系列、一些散点图和几条线。当我选择一个区域来放大散点时,我看到一堆额外的点,这些点应该超出图表轴上绘制的范围。是否有 Highcharts 设置或覆盖本机缩放功能以删除这些屏幕外点的方法?
"@angular/core": "11.2.14",
"highcharts": "^9.0.1",
"highcharts-angular": "^2.10.0",
这是缩小的图表。它有多个系列,但它是我正在调试的散点图系列。
选择我的缩放区域
放大。请注意,该系列中的其他散点应该远远超出所选范围,但仍然是画在轴上。
这是我正在使用的粗略 HighCharts 选项(标签和刻度线 [等] 在数据加载后会进行调整,因此不会精确):
export const BASE_CHART_SETTINGS: ChartSettings = {
chart: {
renderTo: '',
animation: false,
backgroundColor: ChartColors.GridBg,
plotBorderWidth: DEFAULT_GRID_LINE_WIDTH,
plotBorderColor: ChartColors.BorderLine,
marginBottom: 34,
inverted: true,
zoomType: 'xy',
resetZoomButton: {
theme: {
style: {
opacity: 0,
display: 'none',
},
},
},
},
title: { text: null },
legend: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
spline: {
enableMouseTracking: true,
marker: {
radius: 3,
symbol: 'circle',
enabled: true,
},
},
series: {
enableMouseTracking: true,
stickyTracking: true,
lineWidth: 1.25,
states: {
inactive: { opacity: 1 },
},
turboThreshold: 1,
},
},
boost: {
enabled: true,
useGPUTranslations: true,
},
lang: {
noData: 'No Data',
},
tooltip: {
enabled: false,
},
};
export const DEFAULT_SCATTER_SERIES = {
type: 'scatter',
lineWidth: 0,
color: ChartColors.AxisLabel,
enableMouseTracking: false,
marker: {
radius: 3,
symbol: 'circle',
},
states: {
hover: { enabled: true },
},
boostThreshold: 1500,
};
编辑:在进一步的实验中,看起来它可能与增强散点图有关。如果我禁用增强,散点图不会显示屏幕外点预览。不过,出于性能原因,我需要保持积分增加,因此我仍在寻找一种方法来消除显示的额外积分
编辑 2: boostThreshold 还提到了设置 cropThreshold 来更改绘图区域中实际绘制的点数量,但我还没有无法让它工作(将cropThreshold设置为1仍然显示所有屏幕外点)
I'm using Highcharts to show multiple series of data, a few scatterplot and a few line. When I select an area to zoom in on a scatter point, I see a bunch of extra points that are supposed to be out of range drawn on the axis of the chart. Is there a Highcharts setting or a way to override the native zoom functionality to remove those offscreen points?
"@angular/core": "11.2.14",
"highcharts": "^9.0.1",
"highcharts-angular": "^2.10.0",
Here's the chart zoomed out. It has multiple series, but its the scatterplot series I'm debugging.
Selecting my zoom area
Zoomed in. Note that the other scatter points in the series are supposed to be way outside of the selected range but are still drawn on the axis.
Here are rough HighCharts options I'm using (labels and ticks [etc] get tweaked once data loads so its not exact):
export const BASE_CHART_SETTINGS: ChartSettings = {
chart: {
renderTo: '',
animation: false,
backgroundColor: ChartColors.GridBg,
plotBorderWidth: DEFAULT_GRID_LINE_WIDTH,
plotBorderColor: ChartColors.BorderLine,
marginBottom: 34,
inverted: true,
zoomType: 'xy',
resetZoomButton: {
theme: {
style: {
opacity: 0,
display: 'none',
},
},
},
},
title: { text: null },
legend: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
spline: {
enableMouseTracking: true,
marker: {
radius: 3,
symbol: 'circle',
enabled: true,
},
},
series: {
enableMouseTracking: true,
stickyTracking: true,
lineWidth: 1.25,
states: {
inactive: { opacity: 1 },
},
turboThreshold: 1,
},
},
boost: {
enabled: true,
useGPUTranslations: true,
},
lang: {
noData: 'No Data',
},
tooltip: {
enabled: false,
},
};
export const DEFAULT_SCATTER_SERIES = {
type: 'scatter',
lineWidth: 0,
color: ChartColors.AxisLabel,
enableMouseTracking: false,
marker: {
radius: 3,
symbol: 'circle',
},
states: {
hover: { enabled: true },
},
boostThreshold: 1500,
};
EDIT: On further experimentation, it looks like it may be related to the scatterplots being boosted. If I disable boosting, the scatterplots do not show the offscreen point preview. For performance reasons, though, I need to keep the points boosted, so I'm still looking for a way to get rid of the extra points showing up
EDIT 2: The documentation for boostThreshold also mentions setting cropThreshold to change how many points are actually drawn in the plot area, but I haven't been able to get it to work (setting cropThreshold to 1 still shows all of the offscreen points)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论