Django 模板中包含的 Pygal svg 图表的工具提示问题

Posted 2023-02-24

【中文标题】Django 模板中包含的 Pygal svg 图表的工具提示问题

【英文标题】：Tooltip issue with Pygal svg chart included in Django template

【发布时间】：2017-04-05 22:43:01

【问题描述】：

我在 django html 模板文件中包含以下内容：

% include 'categories_chart.svg' %

但是，当发出请求并显示页面时，鼠标悬停时的工具提示信息不完整 - 它仅显示项目的值而不显示项目的标题。问题仅在请求的 HTML 文件中；实际的 svg 文件在单独加载时包含正确的信息。这是单独打开 svg 文件时的工具提示：

这是 Django 浏览器响应中不完整的工具提示，其中包含完全相同的 svg 文件：

知道是什么原因造成的吗？工具提示似乎在 Django 响应中被弄乱了，但这是最突出和可重现的错误，所以我首先关注它。

【参考方案1】：

我设法通过使用 Base 64 数据 URI 输出而不是 SVG 文件来解决这个问题。有关信息，请参阅Paygal output page。

只需将输出分配给一个名称，然后将该名称从您的视图呈现到您的 html 模板，并使用上下文嵌入图表。比如：

your_chart = pygal.Line() (chart code goes here) some_name = your_chart.render_data_uri()

然后在您的 django 视图中：

def charts_page(request): return render_to_response('charts_page.html', 'your_chart': some_name)

最后，在您的 charts_page.html 模板中：

<embed type="image/svg+xml" src= your_chart|safe />

这将完美地显示所有图表并且没有工具提示错误。