Строим график plotly в Юпитер.Ноутбук
# импорт библиотек import pandas as pd import plotly.express as px import plotly # чтение файла с подготовленными данными table_for_scatter = pd.read_csv('https://eddydewrussia.ru/download/dannye-dlja-postroenija-interaktivnogo-grafika/?wpdmdl=5290&refresh=6291d6e6d1a141653724902') # строим график fig = px.scatter(table_for_scatter, x='units', y='unit_price', color='outletname', size='royalty_amount_customer', size_max=100) fig.show()
В Юпитер.Ноутбук получим данные для встраивания PlotLy на сайт
# выводим DIV блок графика plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')
Обратите внимание! В блоке выше прямые кавычки могут быть переделаны самим сайтом на апострофы.
При вставке приведённого кода проверьте их и при необходимости, замените.
Получаем блок DIV(отрывок) графика PlotLy:
Встраиваем график PlotLy в сайт
- На сайте активируем блок вставки произвольного HTML
- В первую строку блока вставляем активацию подсистемы вывода графика:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
- Затем – полученный выше блок DIV
Обратите внимание на то, что блок DIV в выводе заключён в одинарные кавычки ‘
Копировать блок для переноса на сайт следует без этих кавычек
В итоге ячейка произвольного HTML выглядит так (отрывок):
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div> <div id="2c6ca52a-b541-4a94-b51b-1489ca227e74" class="plotly-graph-div" style="height:100%; width:100%;"></div> <script type="text/javascript"> window.PLOTLYENV=window.PLOTLYENV || {}; if (document.getElementById("2c6ca52a-b541-4a94-b51b-1489ca227e74")) { Plotly.newPlot( "2c6ca52a-b541-4a94-b51b-1489ca227e74", [{"hovertemplate":"outletname=YouTube Music<br>units=%{x}<br>unit_price=%{y}<br>royalty_amount_customer=%{marker.size}<extra></extra>","legendgroup":"YouTube Music","marker":{"color":"#636efa","size":[1.233006],"sizemode":"area","sizeref":0.0001233006,"symbol":"circle"},"mode":"markers","name":"YouTube Music","orientation":"v","showlegend":true,"x":[400],"xaxis":"x","y":[0.003082515],"yaxis":"y","type":"scatter"},{"hovertemplate":"outletname=Youtube<br>units=%{x}<br>unit_price=%{y}<br>royalty_amount_customer=%{marker.size}<extra></extra>","legendgroup":"Youtube","marker":{"color":"#EF553B","size":[0.063765],"sizemode":"area","sizeref":0.0001233006,"symbol":"circle"},"mode":"markers","name":"Youtube","orientation": ...
И результат, интерактивный график PlotLy на нашем сайте:
Если больше одного графика PlotLy на странице:
Если надо разместить на странице больше одного графика, то для последующих графиков не надо вставлять строку загрузки графической библиотеки.
Досточно лишь DIV блока.
Русский язык в подписях и надписях графика PlotLy
А вот с русским языком в надписях – проблема.
Сама система PlotLy адекватно прорисовывает графики с русскими надписями.
Также верно происходит экспорт графика в html файл.
Однако при экспорте в DIV блок, все кириллические символы заменяются на их коды.
А сайт но вордпресс эти коды не выводит буквами, и выводит эти самые коды и получается белиберда.
Что делать?
- Текст блока DIV графика PlotLy вставить блокнот Windows
- Меню “Заменить”.
- Указываем для поиска “\\”
- Указываем для замены “\”
- Выделяем весь текст и копируем
- Заходим на сайт КОНВЕРТЕР
- (выяснилось, что этот текст с кракозябрами, но с одинарными \ можно сразу вставить на сайт (п. 9)
- Вставляем весь текст в окно Юникод
- Ждём
- В окне Текст выделяем весь текст, копируем и вставляем его в блок “Произвольный HTML”
- Получаем результат.
Содержимое файла (отрывок):
После замены \\ на \
После обработки на сайте