2010-09-21 2 views
3

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

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

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

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

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

Спасибо!

ответ

5

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

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

Here's a rough example, что я уверен, что вы можете адаптироваться к любой веб-структуре, которую используете.

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

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

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 изображения независимо от клина помечен как ...

+0

Спасибо, Джо, много деталей и примеров. Очень приятно :) Я пытаюсь реализовать это с помощью django и html. Но я не понимаю ваш html. Обычно я помещаю ссылку на изображение или место, где оно сохранено. – pavid

+0

@Patricia - Ну, это все, что я делаю в первом примере ... Он просто сохраняет изображение на диск, вставляет '', а затем генерирует карту изображения для сохраненного изображения на основе клиньев в круговой диаграмме. (Выделение синтаксиса Stackoverflow немного неудобно со всеми строками с вложенными '' ',' '' и '' "" '). Ключ предназначен для цикла под« '# - Получить координаты каждого клина. . "бит. Я просто хватаю вершины для каждого клина, преобразуя их в координаты пикселей для сохраненного изображения и генерируя строку с этими коордами.Надеюсь, это поможет! –

+0

Я думаю, что моя ошибка где-то там, потому что, когда я передаю переменные шаблону, он ничего не делает – pavid

1

Вы можете сделать это с помощью наложения изображений или HTML-элементов, управляемых JavaScript/jQuery.

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

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

+0

Если бы данные были всегда одинаковыми, было бы очень легко, карта изображений сделала бы трюк. Но данные могут меняться, поэтому они должны вычисляться в одиночку. js или jq сделали бы это? – pavid

+0

Да, вы можете создавать и изменять элементы любым способом, используя только javascript/jquery. Я посмотрю, смогу ли я придумать пример кода позже. –