将此散景图转换为 JavaScript？

Question

我在 Python 中询问了 question a few weeks ago about making a graph like this，并从那里的答案中得到了一些想法。基本上，我正在尝试制作一个交互式网络图表。它应该是由线段连接的一堆点（某种连接的散点图）。每个点都有两个对应的轴标签 - 一个是带有一些文本的框，另一个是带有数字的框（这个数字也是图表上 "column" 中绘制的数字）

我决定尝试使用 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，如果有人能给我一些框架代码，这会是什么样子，那就太好了。任何建议或想法将不胜感激。

Answer 1

如果你不熟悉 JS，d3.js 可能有点不知所措。

我个人使用highcharts：https://www.highcharts.com/demo

你可以随便找一个模板，把你的数据放进去，也可以把数据从pythondict传到json，这样highcharts就可以轻松渲染图了，你可以完全忘记前端和图形部分。

这是一张与您使用基本折线图模板的图表类似的图表：https://jsfiddle.net/gpv93e4j/1/

<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'
                }
            }
        }]
    }

});

N.B：我只需要更改Highcharts.chart部分。

将此散景图转换为 JavaScript？

Converting this Bokeh plot to JavaScript?

javascript

python

charts

d3.js

bokeh