将此Bokeh绘图转换为JavaScript？

几周前，我问了一个关于用Python制作一个图形的问题，从中我得到了一些想法。基本上，我正在尝试制作一个交互式网络图表。它应该是一组由线段连接的点（某种连接的散点图）。每个点都有两个对应的轴标签-一个是带有一些文本的框，另一个在下面有一个数字（这个数字也是图表上“列”中绘制的数字）

我决定尝试使用Python库Bokeh制作我的绘图。到目前为止，我的情况如下：

import bokeh.io
from bokeh.resources import INLINE
from bokeh.embed import components
from bokeh.models.tools import HoverTool
from bokeh.models import CategoricalAxis, FactorRange
from bokeh.plotting import figure, output_file, show, output_notebook

x = ['label1', 'label2', 'label3', 'label4', 'label5', 'label6', 'label7', 'label8']
y = [1.1, 2.2, 1.8, 4.0, 1.0, 2.8, 3.6, 1.7]
p = figure(x_range=[*x], y_range=(0, 5), plot_height=500)
# dotted line graph is constructed of a circle glyph and a line glyph together
dots = p.circle(x=x, y=y, color='black', size=10)
line = p.line(x=x, y=y, color='black')

numbers = ['1.1', '2.2', '1.8', '4.0', '1.0', '2.8', '3.6', '1.7']
p.extra_x_ranges = {"extra_numbers": FactorRange(factors=numbers)}
p.add_layout(CategoricalAxis(x_range_name="extra_numbers"), 'below')
p.toolbar.logo = None
show(p)

我对图像分辨率表示歉意

正如你所看到的，实际的绘图与我的目标非常接近，但是轴看起来一点也不好。不幸的是，在Bokeh中，多线轴支持似乎相当困难，在两个x轴上添加样式的困难使我认为应该切换我的方法

我认为有三种可能性在向前发展：

尝试在JS中创建图形模板，并将绘图添加到该模板中。换句话说，在JS中创建底部两行框和y轴图例，在Bokeh中创建一个连接的散点图，并将该散点图放置到JS模板中

在JS绘图库中重新创建此图表，如D3.JS。这似乎是最好的长期解决方案

尝试在Bokeh或其他Python库中解决这个问题（我是一个非常缺乏经验的开发人员，但这似乎不会发生）

---

我对JS不太熟悉——如果有人能给我一些框架代码，说明如果需要JavaScript，这可能是什么样子，那就太好了。任何建议或想法都将不胜感激。

如果您不熟悉JS，

d3.JS

可能会有点难以接受

我个人使用海图：

您只需找到一个模板并将数据放入其中，还可以将数据从python

dict

传递到

json

，这样highcharts就可以轻松渲染绘图，您可以完全忘记前端和图形部分

下面是一个与您使用的基本折线图模板类似的图形：

---

注：我只需要更改高图部分。

非常感谢！我一定会开始玩这个。你有没有办法让高图表看起来像我问题中的图I（即，轴标签周围有方框）？这对我来说是一个很好的起点，我将试着集中精力设计x轴的样式。

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Basic line chart showing trends in a dataset. This chart includes the
        <code>series-label</code> module, which adds a label to each line for
        enhanced readability.
    </p>
</figure>

.highcharts-figure, .highcharts-data-table table {
    min-width: 360px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

Highcharts.chart('container', {

    title: {
        text: 'title'
    },

    subtitle: {
        text: 'dummy'
    },

    yAxis: {
        title: {
            text: 'y'
        }
    },

    xAxis: [{

        'categories': ['label1', 'label2', 'label3', 'label4', 'label5', 'label6', 'label7', 'label8']
    },
       {
        'categories': ['1.1', '2.2', '1.8', '4.0', '1.0', '2.8', '3.6', '1.7'],
        'linkedTo': 0
       }
    ],

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },



    series: [{
        data: [1.1, 2.2, 1.8, 4.0, 1.0, 2.8, 3.6, 1.7]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});