Highchart pie传奇圈子

Question

我使用高图饼图创建一个圆环图,但希望传说图标是圆圈任何想法??? 下面是模型和实际的Web版本.谢谢...

Answer 1

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

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

Answer 2

在Highcharts的最新版本中,您可以使用symbolWidth: width和symbolRadius: width/2内部legend: {}.

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