Highchart 饼图传奇圈答案

【问题标题】：Highchart pie legend circlesHighchart 饼图传奇圈
【发布时间】：2013-06-07 03:33:27
【问题描述】：

我正在使用 highchart 饼图来创建圆环图，但希望图例图标是圆圈任何想法？下面是模型和实际的网络版本。谢谢...

【问题讨论】：

标签： javascript highcharts geometry legend

【解决方案1】：

在最新版本的 Highcharts 中，您可以在 legend: {} 中使用 symbolWidth: width 和 symbolRadius: width/2。

查看这个 JSFiddle 演示：http://jsfiddle.net/Wzs9L/

【讨论】：

如此干净有效。很棒。
@walterpaoli 如何将图例从圆形更改为矩形，如果您能提供此信息，将会很有帮助。谢谢！
你可以将 symbolRadius 设置为 0。

【解决方案2】：

我根据饼图准备了解决方案。图例在数据点上生成，自动作为 HTML 列表。然后所有元素从系列中获取颜色，并使用 CSS3 生成圆形对象（border-radius）。因此，您需要添加点击事件。

http://jsfiddle.net/N3KAC/1/

 $legend = $('#customLegend');

    $.each(chart.series[0].data, function (j, data) {

        $legend.append('<div class="item"><div class="symbol" style="background-color:'+data.color+'"></div><div class="serieName" id="">' + data.name + '</div></div>');

    });

    $('#customLegend .item').click(function(){
        var inx = $(this).index(),
            point = chart.series[0].data[inx];

        if(point.visible)
            point.setVisible(false);
        else
            point.setVisible(true);
    });

CSS：

    .symbol {
    width:20px;
    height:20px;
    margin-right:20px;
    float:left;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.serieName {
    float:left;
    cursor:pointer;
}

.item {
    height:40px;
    clear:both;
}

【讨论】：

【解决方案3】：

实现此目的的另一种方法是使用 CSS 覆盖样式。只需将下面的类添加到您的样式表中：

.highcharts-legend-item rect {
    width: 12px;
    height: 12px; /* height = width */
    rx: 50%;
    ry: 50%;
}

这将覆盖 SVG 矩形元素的默认样式。

【讨论】：

【解决方案4】：

有一个非常简单的解决方法。只需在 chartoptions 中设置以下属性：

chartoptions.legend.symbolHeight = 12;
chartoptions.legend.symbolWidth = 12;
chartoptions.legend.symbolRadius = 6;

如需进一步参考，请查看highcharts api documentation。

查看此jsFiddle。

【讨论】：

欢迎来到 StackOverflow！请考虑How do I write a good answer? – Provide context for links。