代码之家 › 专栏 › 技术社区 › psoares

如何在图表中创建超链接

hyperlink matplotlib python jquery javascript

psoares · 技术社区 · 14 年前

我想在matplotlib中做一个饼图。
这个饼图将代表两个变量:男性和女性。

这很容易做到:)

下一步我想做什么,我甚至不确定是否可以使用matplotlib,我想让这两个变量可以点击,所以如果我点击male,我会看到另一个页面,上面有关于这个的信息,女性也是一样。

图像映射不是一个解决方案,因为这个变量在将来可能会改变。

谢谢您!

2 回复 | 直到 9 年前

Joe Kington 14 年前

虽然它还没有真正处于一个可行的稳定状态,看看 html5 canvas backend for matplotlib . 不管怎样,它看起来很有趣,而且可能是将来做这类事情(带有matplotlib图的交互式网页)的最佳方式。

同时,正如@Mark所建议的,动态地为饼图的楔形部分生成imagemap并不难。

Here's a rough example ,我相信您可以适应您使用的任何web框架。

import matplotlib.pyplot as plt

def main():
    # Make an example pie plot
    fig = plt.figure()
    ax = fig.add_subplot(111)

    labels = ['Beans', 'Squash', 'Corn']
    wedges, plt_labels = ax.pie([20, 40, 60], labels=labels)
    ax.axis('equal')

    make_image_map(fig, wedges, labels, 'temp.html')

def make_image_map(fig, wedges, labels, html_filename):
    """Makes an example static html page with a image map of a pie chart.."""
    #-- Save the figure as an image and get image size ------------------------
    # Be sure to explictly set the dpi when saving the figure
    im_filename = 'temp.png'
    fig.savefig(im_filename, dpi=fig.dpi)

    # Get figure size...
    _, _, fig_width, fig_height = fig.bbox.bounds

    #-- Get the coordinates of each wedge as a string of x1,y2,x2,y2... -------
    coords = []
    for wedge in wedges:
        xy = wedge.get_verts() 

        # Transform to pixel coords
        xy = fig.get_transform().transform(xy) 

        # Format into coord string and convert to <0,0> in top left...
        xy = ', '.join(['%0.2f,%0.2f' % (x, fig_height - y) for x, y in xy])
        coords.append(xy)

    #-- Build web page --------------------------------------------------------
    header = """
    <html>
    <body>
    <img src="{0}" alt="Pie Chart" usemap="#pie_map" width="{1}" height="{2}" />
    """.format(im_filename, fig_width, fig_height)

    # Make the image map
    map = '<map name="pie_map">\n'
    for label, xy in zip(labels, coords):
        href = 'http://images.google.com/images?q={0}'.format(label)
        area = '<area shape="poly" coords="{0}" href="{1}" alt="{2}" />'
        area = area.format(xy, href, label)
        map += '    ' + area + '\n'
    map += '</map>\n'

    footer = """
    </body>
    </html>"""

    # Write to a file...
    with file(html_filename, 'w') as outfile:
        outfile.write(header + map + footer)

if __name__ == '__main__':
    main()

编辑:我刚刚意识到你可能不是指把情节嵌入网页。。。(我假设您来自问题中的“display another page”(显示另一个页面)如果您想要更多的桌面应用程序,而不必弄乱“完整”的gui工具包,您可以这样做:

import matplotlib.pyplot as plt

def main():
    # Make an example pie plot
    fig = plt.figure()
    ax = fig.add_subplot(111)

    labels = ['Beans', 'Squash', 'Corn']
    wedges, plt_labels = ax.pie([20, 40, 60], labels=labels)
    ax.axis('equal')

    make_picker(fig, wedges)
    plt.show()

def make_picker(fig, wedges):
    import webbrowser
    def on_pick(event):
        wedge = event.artist
        label = wedge.get_label()
        webbrowser.open('http://images.google.com/images?q={0}'.format(label))

    # Make wedges selectable
    for wedge in wedges:
        wedge.set_picker(True)

    fig.canvas.mpl_connect('pick_event', on_pick)

if __name__ == '__main__':
    main()

它打开了一个浏览器窗口,谷歌图像搜索的任何楔形被标记为。。。

Mark Snidovich 14 年前

您可以通过JavaScript/jQuery控制的imagemap或HTML元素覆盖来实现这一点。

本质上,将图表数据与图表图像一起发送到页面,并使用JS根据数据的规范创建带有链接的元素。

这比我以前做的条形图要难一些,但应该可以很好地工作。