作为销售图表的一部分,我必须在悬停上添加一些工具提示,以便可以显示与用户将鼠标悬停在其附近的数据点相对应的数字。作为其一部分,每当值为null
时,我也不需要显示工具提示。
这是我的代码。我尝试使用defined
键删除作为工具提示标记来源的标记。
'signals': [
{
'name': 'interpolate', 'value': 'monotone'
},
{
'name': 'hover',
'value': null,
'on': [
{ 'events': '@voronoi_lines:mouseover', 'update': 'datum' },
{ 'events': '@noronoi_lines:mouseout', 'update': 'null' }
]
}
],
...
'marks': [
{
'name': 'data_points',
'description': 'Adds the data points which are used to position the visual indicator',
'from': { 'data': 'annualSales' },
'type': 'symbol',
'encode': {
'update': {
// this I added hoping to remove any null values, nothing happened
'defined': { 'signal': 'datum.expected_sales !== null || datum.actual_sales !== null || datum.difference !== null' },
'fill': { 'value': 'transparent' },
'size': { 'value': 10 },
'stroke': { 'value': 'transparent' },
'x': { 'scale': 'x', 'field': 'week_start' },
'y': { 'value': 0 }
}
}
},
{
'name': 'voronoi_lines',
'description': 'The voronoi cells automatically selects the nearest data point to the mouse cursor ',
'type': 'path',
'from': { 'data': 'data_points' },
'zindex': 101,
'encode': {
'enter': {
'tooltip': {
'signal': 'Expected sales': format(datum.datum.expected_sales, '.2f'), 'Actual sales': format(datum.datum.actual_sales, '.2f')}`
}
},
'update': {
'defined': { 'signal': 'datum.datum.expected_values !== null || datum.datum.actual_sales !== null' },
'fill': { 'value': 'transparent' },
'strokeWidth': { 'value': 1 },
'stroke': { 'value': 'transparent' }
}
},
'transform': [
{
'type': 'voronoi',
'x': 'datum.x',
'y': 'datum.y',
'size': [{ 'signal': 'width' }, { 'signal': 'height' }]
}
]
}
]
...
然后我像这样渲染图形:
const handler = new Handler();
this.view = new View(parse(spec))
.renderer('svg')
.initialize(this.$refs.vis)
.tooltip(handler.call)
.run();
即使我尝试通过使用null
... defined
甚至是signal
来过滤'config': { 'invalidValues': 'filter' },
值,这些尝试也没有导致设法删除值为空时的工具提示,但要使其显示0.0
。
我只希望根本不显示工具提示。那么,有什么建议吗?