Настройка hc_tooltip с помощью средства форматирования для добавления цвета текста удалила мои маркеры, и попытка вернуть их не удалась
Я пробую пакет highcharter в R. Я пытаюсь добавить всплывающую подсказку. По умолчанию (первый пример) дает мне маркер и название серии.
hc_tooltip(
shared = TRUE,
split = FALSE,
valueDecimals = 2)
Но когда я пытаюсь добавить цвет текста во всплывающую подсказку, чтобы он соответствовал цвету серии, я теряю маркеры. Моя попытка ниже дает только имя маркера, но не сам маркер. Есть ли у кого-нибудь решение, которое обойдет мою попытку?
hc<-hc %>% hc_tooltip(
shared = TRUE,
split = FALSE,
valueDecimals = 2,
symbol = "circle",
formatter = JS(
"function () {
var tooltip = '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b><br/>';
$.each(this.points, function (i, point) {
var color = point.series.color;
var marker = point.series.symbol; // Get the marker symbol
tooltip += '<span style=\"color:' + color + ';\"><b>' + marker + '</b>: '+ point.series.name + '</b>: ' + point.y.toFixed(2) + '</span><br/>';
});
return tooltip;
}"
)
)
Ответы 1
Подсказка по умолчанию содержит добавленные диапазоны для каждой серии, которые имеют следующую форму:
<span style = "color:rgb(161,173,255)">●</span>
Таким образом, вы можете добавить их в свою всплывающую подсказку примерно так, используя карту для поиска кода символа:
library(highcharter)
highchart() %>%
hc_add_series(data = sample(1:12)) %>%
hc_add_series(data = sample(1:12) + 10) %>%
hc_tooltip(
shared = TRUE,
formatter = JS("
function () {
var tooltip = '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</b><br/>';
$.each(this.points, function (i, point) {
let symbolMap = new Map();
symbolMap.set('circle', '●');
symbolMap.set('diamond', '◆');
symbolMap.set('square', '■');
symbolMap.set('triangle', '▲');
symbolMap.set('triangle-down', '▼');
var color = point.series.color;
var symbolName = point.series.symbol;
tooltip += '<span style=\"color:' + color + ';\">' + symbolMap.get(symbolName) + '</span><span style=\"color:' + color + ';\">: '+ point.series.name + '</b>: ' + point.y.toFixed(2) + '</span><br/>';
});
return tooltip;
}
"
)
)
Мне нужно было бы увидеть код, чтобы воспроизвести вашу диаграмму, но, возможно, вы могли бы сначала проверить, определен ли point.series.symbol, прежде чем пытаться найти значение и вернуть пустую строку, если она отсутствует.
работал if (typeof point.series.symbol === 'undefined'){ tooltip += '<span style=\"color:' + color + ';\">' + symbolMap.get('square') + '</span><span style=\"color:' + color + ';\">: '+ point.series.name + '</b>: ' + point.y.toFixed(2) + '</span><br/>'; } else { tooltip += '<span style=\"color:' + color + ';\">' + symbolMap.get(symbolName) + '</span><span style=\"color:' + color + ';\">: '+ point.series.name + '</b>: ' + point.y.toFixed(2) + '</span><br/>'; }
Спасибо @the-mad-statter. Это работает: однако в случае комбинированной диаграммы, в которой есть как сплайны, так и столбцы! как я могу избежать появления «неопределенного» места во всплывающей подсказке там, где должен находиться маркер?