Создайте легенду круговой диаграммы Highcharts внутри таблицы

Есть ли способ создать легенду Highcharts внутри таблицы? Я хочу иметь возможность стилизовать фон легенды для моего круга Highcharts с чередующимися цветами фона для каждого элемента и пользовательскими границами.

Я отформатировал свою легенду таким образом, но не могу понять, как встроить ее в таблицу, которую затем можно отформатировать.

legend: {
        layout: 'vertical',
        align: 'center',
        verticalAlign: 'bottom',
        backgroundColor: '#f3f3f3',
        borderWidth: 0,
        useHTML: true,
        itemMarginBottom: 10,
        labelFormatter: function () {
            return '<div style="width:200px"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.percentage.toFixed(0) + '%</span><span style="float:right; margin-right:15%">$' + Highcharts.numberFormat(this.y, 0) + '</span></div>';
        }

    },

JS-скрипт: http://jsfiddle.net/hAnCr/135/

Любая помощь будет оценена по достоинству. Спасибо!


javascript highcharts legend
person Chris Martinez    schedule 08.10.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите поместить эту легенду в отдельную таблицу где-нибудь на странице - это не поддерживается.

Если вы хотите просто сгенерировать стандартную легенду как есть, но просто использовать таблицу вместо промежутков:

  • вместо return <div style="width:200px"> ... </div> используйте return <table> ... </table>
  • установить useHTML: true
person Paweł Fus    schedule 08.10.2013
comment
Спасибо, но есть ли способ поместить каждый элемент в отдельную строку таблицы, чтобы его можно было стилизовать отдельно? Я хотел бы иметь возможность использовать чередующиеся цвета фона для каждого элемента легенды. - person Chris Martinez; 09.10.2013
comment
Ах, извините за недоразумение - к сожалению, у легенды нет одного средства форматирования для всех меток, но средство форматирования для каждой метки, поэтому возврат одной таблицы, где каждый элемент является строкой, будет невозможен прямо сейчас. - person Paweł Fus; 10.10.2013
comment
А вот простой обходной путь с использованием CSS: jsfiddle.net/hAnCr/136 (изменен только цвет шрифта, сделать то же самое для всего остального). - person Paweł Fus; 10.10.2013