Pygal 图表在 Internet Explorer 11 上不起作用答案

【问题标题】：Pygal Charts Not Working On Internet Explorer 11Pygal 图表在 Internet Explorer 11 上不起作用
【发布时间】：2017-05-11 14:24:12
【问题描述】：

我似乎无法弄清楚如何让我的 Pygal 图表呈现为 Base 64 URI 在 IE 11 上工作。事实上，当访问 IE 11 上的 Pygal 文档 (http://www.pygal.org/en/stable/) 时，他们的图表都没有在 IE 上工作任何一个。

有人知道解决方法吗？

我在下面附上了一些示例代码来展示我是如何渲染图表的。

HTML：

  <div class="clearfix"></div>
        <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="x_panel">
              <div class="x_title">
                <h2>Chart</h2>
                <ul class="nav navbar-right panel_toolbox">
                  <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                  </li>
                  </li>
                  <li><a class="close-link"><i class="fa fa-close"></i></a>
                  </li>
                </ul>
                <div class="clearfix"></div>
              </div>
              <div class="x_content">
                <embed type="image/svg+xml" src={{chart|safe}} style='width:100%'/>
              </div>
            </div>
          </div>

初始化.py:

line_chart = pygal.Line()
line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013)) 
line_chart.add('Firefox', [None, None,    0, 16.6,   25,   31, 36.4, 45.5, 
46.3, 42.8, 37.1])
line_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 
10.8, 23.8, 35.3])
line_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 
36.2, 26.6, 20.1])
line_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,   
 6.7,  6.8,  7.5])
line_chart.render_data_uri()

return render_template("html.html", chart = chart)

【问题讨论】：

标签： python internet-explorer web-applications flask pygal

【解决方案1】：

我访问了a sample chart at pygal.org 并使用开发工具检查了源代码。使用

<img src="data-uri....." alt="chart title"/>

而不是

<embed src="data-uri...."/>

IE 具有安全区域和限制嵌入对象可以使用的 mime 类型。 embed 标签需要 src 和 type 属性来匹配 mime 类型。 <img> 元素是可点击的。用户可以右键单击并将图表图像复制到剪贴板。

【讨论】：

运行良好。感谢您的帮助！