将这个Bokeh情节转换为JavaScript？

Question

我问 这个 几个星期前，有一个问题，关于做一个类似于 这个 在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轴上添加样式的困难让我觉得我应该换一种方法。

我看到了三种前进的可能性。

1. 试着用JS创建一个图形模板 然后把图形添加到这个模板中去 换句话说，在JS中创建底部两行方框和y轴图例，在Bokeh中创建一个连接的散点图，并将该散点图放入JS模板中。

2. 在JS绘图库中重新制作这个图表，比如D3.js。这似乎是最好的长期解决方案。

3. 试着在Bokeh或其他Python库中想办法（我是一个很没有经验的开发，但这似乎不会发生）。

我对JS不是很熟悉--如果有人能给我一些骨架代码，说明如果需要JavaScript的话，这可能会是什么样子，那就太好了。如果有任何建议或想法，我将非常感激。

Answer 1

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

我个人用的是highcharts。https:/www.highcharts.comdemo

你只要找一个模板，把你的数据放在里面就可以了，也可以把数据从python中传过来。dict 到 json 以便于highcharts能够轻松地渲染出图形，你可以完全忘记前端和图形部分。

下面是一个和你类似的使用基本线图模板的图形。https:/jsfiddle.netgpv93e4j1。

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

});

注：我只需要更改一下。Highcharts.chart 部分。