在表格内创建一个Highcharts饼图图例 [英] Create a Highcharts Pie Chart Legend Inside a Table

问题描述

有没有办法在表格内创建一个Highcharts图例？我希望能够为每个元素和自定义边框使用交替的背景颜色来为我的Highcharts饼图样式设置图例的背景。

我已将格式化为我的图例，但无法弄清楚如何将其嵌入到可以格式化的表格中。

 图例：{
 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）+'< ; /跨度>< / DIV>'; 
} 
 
}，
  

JS小提琴： http://jsfiddle.net/hAnCr/135/

任何帮助，将不胜感激。谢谢！

解决方案

如果您想将该图例放在单独的表格中，某个页面上的某个地方 - 它不受支持。

如果您想按原样生成标准图例，但只需使用表格而不是跨度：

• 而不是返回< div style =width：200px> ...< / div> 使用返回< table> ...< / table>


• 设置useHTML：true

Is there a way to create a Highcharts legend inside of a table? I want to be able to style the background of the legend for my Highcharts pie with alternating background colors for each element and custom borders.

I've formatted my legend like so, but cannot figure out how to embed it inside a table that I can then format.

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 Fiddle: http://jsfiddle.net/hAnCr/135/

Any help would be appreciated. Thanks!

解决方案

If you want to put that legend in separate table, somewhere on a page - it's not supported.

If you want to just generate standard legend as is, but just use table instead of spans:

• instead of return <div style="width:200px"> ... </div> use return <table> ... </table>
• set useHTML: true

这篇关于在表格内创建一个Highcharts饼图图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！