Как использовать собственный символ маркера ('[' и ']') в Plotly.js
Я работаю над проектом, который требует графиков. Я использую Plotly с JS.
Мне нужны специальные символы «[» или «]» в качестве маркеров на графике.
Хотя я предпочитаю без использования SVG, я открыт для изменений.
Как?
Я попробовал:
HTML-код:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Graphs</title>
<script src = "https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id = "graph-1"></div>
<script src = "index.js"></script>
</body>
</html>
JS-код:
index.js
graph_1_data = [{
x: [1, 2, 3],
y: [1, 2, 3],
mode: 'lines+markers',
line: {
shape: 'linear',
color: 'blue'
},
marker: {
symbol: "[", #Here even though I give '[' it's showing circle[it's default probably] on the plotted graph
size: 15
}
}]
graph_1_layout = {
title: "Graph-1"
}
Plotly.newPlot('graph-1',graph_1_data, graph_1_layout);
Пожалуйста, помогите мне получить пользовательские маркеры (точнее, '[' и ']') в Plotly JS.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Отказ от ответственности: я не являюсь пользователем Plotly.js. Предлагаемое решение было сделано на примере, приведенном на форуме Plotly.
Вам нужно будет заменить lines+markers на lines+text, а затем использовать свойство text объекта графика Plotly, чтобы указать отдельные маркеры для каждой из координат.
Например:
var graph_1_data = [{
x: [1, 2, 3],
y: [1, 2, 3],
mode: 'lines+text',
text: ['[','[','['],
line: {
shape: 'linear',
color: 'blue'
},
textfont: {
size: 25,
color: 'blue'
}
}]
graph_1_layout = {
title: "Graph-1"
}
Plotly.newPlot('graph-1',graph_1_data, graph_1_layout); <script src = "https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id = "graph-1"></div>Или, чтобы не заполнять массив text вручную с помощью [:
const xCoords = [1,2,3];
const yCoords = [1,2,3];
const markers = new Array(xCoords.length).fill('[');
var graph_1_data = [{
x: xCoords,
y: yCoords,
mode: 'lines+text',
text: markers,
// ... the rest of the code
}]
Идеальный. Спасибо. Изменение его на строку+текст работало как Charm.
@BennyLazarusKamal Рад, что смог помочь. Есть одна вещь, которая может вас беспокоить позже — всплывающая подсказка. Наведите указатель мыши на любой из маркеров, чтобы понять, что я имею в виду. Существуют различные способы справиться с этим (из того, что я видел), но вы можете сделать два: 1) полностью скрыть всплывающую подсказку, 2) настроить всплывающую подсказку так, чтобы она отображала только значение Y. Дайте мне знать, если вам что-то из этого нужно, и я отредактирую ответ.
Вы не можете добавить его в качестве маркера, вы можете добавить один из следующих: plotly.com/javascript/reference/scatter/#scatter-marker-symbol