Строим график 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 блок, все кириллические символы заменяются на их коды.
А сайт но вордпресс эти коды не выводит буквами, и выводит эти самые коды и получается белиберда.

Что делать?

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

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

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

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

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