jQuery Flot Pie Chart - выноски для этикеток? - PullRequest
Новая
       23

jQuery Flot Pie Chart - выноски для этикеток?

1 голос
/ 15 июля 2011

Я использую flot для своих нужд в jquery.Теперь мне нужно добавить круговую диаграмму (я знаю, что flot работает довольно хорошо).Что касается круговой диаграммы, то единственное, что нам нужно, чтобы я не видел, чтобы у flot были обратные вызовы к значениям на каждой части пирога (выноски - это метка с линией, соединяющей метку с частью пирога).Кто-нибудь знает, как заставить выноски работать с куском пирога во flot?

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

Я предложил использовать легенду, но это неприемлемо для бизнеса.Я знаю, что другие решения для построения диаграмм допускают использование меток, но я хотел бы продолжать использовать flot, если это возможно.

Заранее спасибо.

Ответы [ 2 ]

4 голосов
/ 21 июля 2011

Я добавил что-то похожее на тест на заговор. Вам нужно будет адаптировать решение к вашему конкретному сценарию, но это должно помочь. 

 function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body");//.fadeIn(200);
 }

 var previousPoint = null;

 $('#placeholder').bind('mouseout', function() {
    plot.unhighlight();
    $("#tooltip").remove();
    $(this).data('previous-post', -1);
 });

 $('#placeholder').bind('plothover', function(event, pos, item) {
    if (item) {
        if ($(this).data('previous-post') != item.seriesIndex) {
            plot.unhighlight();
            plot.highlight(item.series, item.datapoint);
            $(this).data('previous-post', item.seriesIndex);
        }
        $("#tooltip").remove();
        y = 'on ' + (new Date(item.datapoint[0])).toDateString() + ': ' + item.datapoint[1];
        showTooltip(pos.pageX, pos.pageY, item.series.label + " " + y);
    } else {
        plot.unhighlight();
        $("#tooltip").remove();
        previousPost = $(this).data('previous-post', -1);
    }
 });

Дайте мне знать, если это поможет!

1 голос
/ 21 июля 2011

Вы можете использовать событие plothover , чтобы показать выноску. Метка для выноски может быть где угодно. Это показано в последнем примере на странице Flot . В Google Spreadsheets используется решение, аналогичное связанному, и оно работает очень хорошо.

...