Highchart馅饼传奇圈子 [英] Highchart pie legend circles

问题描述

我使用高图饼图来创建一个甜甜圈图表，但想传说图标是圆形的任何想法？下面是模型和实际的网页版本。感谢...

Im using a highchart pie chart to create a donut chart but would like the legend icons to be circles any ideas??? Below is the mockup and the actual web version. Thanks...

推荐答案

我准备了基于饼图的解决方案。图例在数据点上自动生成为HTML列表。然后，所有元素都从系列中获取颜色，并使用CSS3生成圆形对象（边框半径）。因此你需要添加点击事件。

I prepared solution based on pie chart. Legend is generated on data points, automatically as HTML list. Then all elements gets colors from series, and use CSS3 to generate circle object (border-radius). As a result you need to add click event.

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：

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;
}

这篇关于Highchart馅饼传奇圈子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！