Как часть моего графика продаж, я должен добавить несколько всплывающих подсказок при наведении курсора, чтобы я мог показывать числа, соответствующие точкам данных, в непосредственной близости от которых пользователь наводил указатель мыши. Как часть этого, мне также нужно не показывать всплывающие подсказки, когда значения 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
.
Я просто хочу, чтобы подсказки вообще не отображались. Итак, есть предложения?