Question

在我的python书之后，我使用pygal创建了一个条形图。我将信息呈现为.svg文件，并在我的Web浏览器中打开它。我的书说这个情节是互动的，如果你将鼠标悬停在它上面，它会显示每个条形图的价值。但是，每当我将鼠标悬停在图表上时，都不会发生任何事情。我使用mac和谷歌浏览器查看文件。

谢谢！

Answer 1

我在Windows 10计算机上遇到同样的问题。 MS Edge和Google Chrome都不会将图表呈现为交互式图表。

在python中执行的脚本和最终渲染之间似乎发生了一些事情。我注意到这一点的原因是因为pygal网站上的交互式示例在两个浏览器中都没有问题，但是当示例脚本粘贴到python中并执行时，它并没有按预期工作。

Answer 2

Pygal 2.0以比Pygal 1.9稍微不同的方式呈现工具提示。如果您在浏览器中查看图表，则需要告诉Pygal呈现工具提示以便在浏览器中查看。 force_uri_protocol参数需要设置为'http'。以下代码示例演示如何执行此操作：

hist = pygal.Bar()
hist.force_uri_protocol = 'http'

例如，这是一个应该有效的最小程序：

import pygal

squares = [0, 1, 4, 9, 16, 25]

chart = pygal.Bar()
chart.force_uri_protocol = 'http'
chart.add('Squares', squares)
chart.render_to_file('squares.svg')

Answer 3

要使pygal在浏览器中显示工具提示，必须将其加载到html中的embed标记中例如，这里是我用于在使用flask

呈现的条形图中加载工具提示的片段

<figure>
    <embed type="image/svg+xml" src="{{ stat|safe }}"></embed>
</figure>

并且需要在head标签内部给出javascript库。

    <script type="text/javascript" src="http://kozea.github.com/pygal.js/latest/pygal-tooltips.min.js"></script>

Answer 4

这个问题解决了吗？交互是使用 svg 文件中的 th href 在线脚本完成的。如果您没有互联网链接，它将无法正常工作。如果你解决了这个问题，请告诉我们

Answer 5

您需要在html中加入<script type="text/javascript" src="/js/pygal-tooltips.js"></script>。

工具提示在我的pygal条形图中不起作用？

5 个答案: