как создать гиперссылку в круговой диаграмме - PullRequest
Новая
       8

как создать гиперссылку в круговой диаграмме

3 голосов
/ 21 сентября 2010

Я хочу сделать круговую диаграмму в matplotlib.
Эта круговая диаграмма будет представлять две переменные: мужскую и женскую.

Это легко сделать:)

Что бы я хотел сделать дальше, я даже не уверен, возможно ли это сделать с помощью matplotlib, я хотел бы сделать эти две переменные кликабельными, поэтому, если я нажму на мужчину, я увижу другую страницу с информацией об этом То же самое с женщиной.

Карта изображений не является решением, поскольку в будущем эти переменные могут измениться.

У кого-нибудь есть идеи, как это сделать? Если это возможно с помощью matplotlib или какой программы вы бы порекомендовали.

Спасибо!

Ответы [ 2 ]

5 голосов
/ 21 сентября 2010

Пока он еще не находится в стабильно работоспособном состоянии, взгляните на бэкэнд html5 canvas для matplotlib . В любом случае, это выглядит интересно и, вероятно, будет лучшим способом сделать подобные вещи (интерактивная веб-страница с сюжетом matplotlib) в будущем.

В то же время, как предложил @Mark, динамически генерировать карту изображения для клиньев круговой диаграммы не так сложно.

Вот грубый пример , который, я уверен, вы могли бы адаптировать к любой веб-среде, которую вы используете. 

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()

Редактировать: Я только что понял, что вы, возможно, не имеете в виду встраивание графика в веб-страницу ... (Я предполагал, что вы были из бита "показать другую страницу" в своем вопросе.) Если вы хотите больше Настольное приложение, не прибегая к «полному» набору графического интерфейса, вы можете сделать что-то вроде этого: 

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()

, который открывает окно браузера для поиска картинок Google любого клина, помеченного как ...

1 голос
/ 21 сентября 2010

Это можно сделать с помощью оверлея imagemap или HTML-элемента, управляемого JavaScript / jQuery.

По сути, отправьте данные диаграммы на страницу вместе с изображением диаграммы и используйте JS для создания элементов сссылки в соответствии со спецификацией данных.

Это немного сложнее, чем гистограммы, с которыми я делал это раньше, но должно работать нормально.

...