Как интегрировать интерактивный график PlotLy на сайт

Строим график в Юпитер.Ноутбук

# импорт библиотек
import pandas as pd
import .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()

В Юпитер.Ноутбук получим данные для встраивания на сайт

# выводим DIV блок графика
.offline.plot(fig, include_plotlyjs=False, output_type='div')

Обратите внимание! В блоке выше прямые кавычки могут быть переделаны самим сайтом на апострофы.

При вставке приведённого кода проверьте их и при необходимости, замените.

Получаем блок DIV(отрывок) графика PlotLy:

'<div>                            <div id="2c6ca52a-b541-4a94-b51b-1489ca227e74" class="-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": ...

Встраиваем график в сайт

  • На сайте активируем блок вставки произвольного HTML
  • В первую строку блока вставляем активацию подсистемы вывода графика:
<script src="https://cdn.plot.ly/-latest.min.js"></script>
  • Затем – полученный выше блок DIV
    Обратите внимание на то, что блок DIV в выводе заключён в одинарные кавычки ‘
    Копировать блок для переноса на сайт следует без этих кавычек

В итоге ячейка произвольного HTML выглядит так (отрывок):

<script src="https://cdn.plot.ly/-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 на странице:

Если надо разместить на странице больше одного графика, то для последующих графиков не надо вставлять строку загрузки графической библиотеки.

Досточно лишь DIV блока.

Русский язык в подписях и надписях графика PlotLy

А вот с русским языком в надписях – проблема.

Сама система PlotLy адекватно прорисовывает графики с русскими надписями.

Также верно происходит экспорт графика в html файл.

Однако при экспорте в DIV блок, все кириллические символы заменяются на их коды.
А сайт но вордпресс эти коды не выводит буквами, и выводит эти самые коды и получается белиберда.

Что делать?

  1. Текст блока DIV графика PlotLy вставить блокнот Windows
  2. Меню “Заменить”.
  3. Указываем для поиска “\\”
  4. Указываем для замены “\”
  5. Выделяем весь текст и копируем
  6. Заходим на сайт КОНВЕРТЕР
    1. (выяснилось, что этот текст с кракозябрами, но с одинарными \ можно сразу вставить на сайт (п. 9)
  7. Вставляем весь текст в окно Юникод
  8. Ждём
  9. В окне Текст выделяем весь текст, копируем и вставляем его в блок “Произвольный HTML”
  10. Получаем результат.

Содержимое файла (отрывок):

'<div>                            <div id="2243eb5b-ca2c-4f83-9760-06d60a8d4e48" class="plotly-graph-div" style="height:800px; width:800px;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("2243eb5b-ca2c-4f83-9760-06d60a8d4e48")) {                    Plotly.newPlot(                        "2243eb5b-ca2c-4f83-9760-06d60a8d4e48",                        [{"alignmentgroup":"True","hovertemplate":"\\u0421\\u0435\\u0442\\u0435\\u0432\\u043e\\u0435=\\u043d\\u0435\\u0442<br>\\u0422\\u0438\\u043f \\u0437\\u0430\\u0432\\u0435\\u0434\\u0435\\u043d\\u0438\\u044f=%{x}<br>\\u041a\\u043e\\u043b\\u0438\\u0447\\u0435\\u0441\\u0442\\u0432\\u043e \\u043f\\u043e\\u0441\\u0430\\u0434\\u043e\\u0447\\u043d\\u044b\\u0445 \\u043c\\u0435\\u0441\\u0442 =%{y}<extra></extra>","legendgroup":"\\u043d\\u0435\\u0442","marker":{"color":"#636efa"},"name":"\\u043d\\u0435\\u0442","notched":false,"offsetgroup":"\\u043d\\u0435\\u0442","orientation":"v","quartilemethod":"linear","showlegend":true,"x":["\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440","\\u0431\\u0430\\u0440",

После замены \\ на \

'<div>                            <div id="2243eb5b-ca2c-4f83-9760-06d60a8d4e48" class="plotly-graph-div" style="height:800px; width:800px;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("2243eb5b-ca2c-4f83-9760-06d60a8d4e48")) {                    Plotly.newPlot(                        "2243eb5b-ca2c-4f83-9760-06d60a8d4e48",                        [{"alignmentgroup":"True","hovertemplate":"\u0421\u0435\u0442\u0435\u0432\u043e\u0435=\u043d\u0435\u0442<br>\u0422\u0438\u043f \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f=%{x}<br>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0441\u0430\u0434\u043e\u0447\u043d\u044b\u0445 \u043c\u0435\u0441\u0442 =%{y}<extra></extra>","legendgroup":"\u043d\u0435\u0442","marker":{"color":"#636efa"},"name":"\u043d\u0435\u0442","notched":false,"offsetgroup":"\u043d\u0435\u0442","orientation":"v","quartilemethod":"linear","showlegend":true,"x":["\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440","\u0431\u0430\u0440",

После обработки на сайте

'<div>                            <div id="2243eb5b-ca2c-4f83-9760-06d60a8d4e48" class="plotly-graph-div" style="height:800px; width:800px;"></div>            <script type="text/javascript">                                    window.PLOTLYENV=window.PLOTLYENV || {};                                    if (document.getElementById("2243eb5b-ca2c-4f83-9760-06d60a8d4e48")) {                    Plotly.newPlot(                        "2243eb5b-ca2c-4f83-9760-06d60a8d4e48",                        [{"alignmentgroup":"True","hovertemplate":"Сетевое=нет<br>Тип заведения=%{x}<br>Количество посадочных мест =%{y}<extra></extra>","legendgroup":"нет","marker":{"color":"#636efa"},"name":"нет","notched":false,"offsetgroup":"нет","orientation":"v","quartilemethod":"linear","showlegend":true,"x":["бар","бар","бар","бар","бар","бар","бар","бар","бар","бар","бар","бар","бар",

Получаем график PlotLy с подписями на русском языке:

‘
‘
Статья понравилась?
Ключевые слова:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *