Question

我试图创建一个Bokeh图，它允许我通过单击复选框来切换图中线条的可见性。

我开始尝试对一个复选框组使用js回调，但遗憾的是发现js回调实际上并未针对复选框组实现。

有人可以提出另一种方法来在散景图中切换线条可见性。我猜测修改线条的alpha属性是可行的方法。

以下是一些用于创建情节的简单示例代码：

from bokeh.plotting import figure, show, output_notebook
from bokeh.io import vform
from bokeh.models.widgets import CheckboxGroup
output_notebook()

x = [1, 2, 3, 4, 5]
y1 = [3, 5, 6, 4, 5]
y2 = [2, 4, 7, 6, 5]

p = figure()
line1 = p.line(x, y1, alpha=1, color='blue', legend='blue line')
line2 = p.line(x, y2, alpha=1, color='red', legend='red line')

cbgroup = CheckboxGroup(labels=["toggle blue line","toggle red line"], active=[0,1])
show(vform(p,cbgroup))

Answer 1

我猜测，因为我的问题没有任何回复，所以没有办法在网页的散景图中使用复选框。

在那种情况下，我一直在寻找除了散景之外的其他可能的网络图表库，并找到一个名为C3.js的漂亮的。它纯粹是用javascript实现的，但由于散景已经需要一些js知识，这对散景用户来说可能不是什么大问题。此外，C3.js语法似乎非常简单，即使像我这样知道js很少的人。

对于检查此问题的任何人，我在下面提供了html / js页面代码，该代码创建了等效的C3.js图表，其中包含我尝试使用散景图制作的复选框：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>show hide</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script>
        var chart = c3.generate({
            bindto: '#chart',
            data: {
                x: 'x',
                columns: [
                    ['x',  1, 2, 3, 4, 5],
                    ['y1', 3, 5, 6, 4, 5],
                    ['y2', 2, 4, 7, 6, 5]
              ]
            }
        });

        function cbclick(a){
            var lineData = "y" + a;
            var cbID = "cb" + a
            var cb = document.getElementById(cbID);
            if (cb.checked) {
                chart.show([lineData]);
            } else {
                chart.hide([lineData]);
            }
        }
    </script>

    <div align="center">
        <input type="checkbox" id="cb1" onclick="cbclick(1)" checked="true">y1</input>
        <input type="checkbox" id="cb2" onclick="cbclick(2)" checked="true">y2</input>
    </div>
</body>

在Bokeh图中切换线可见性

1 个答案: