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的最新版本中，您可以在legend: {}使用symbolWidth: width和symbolRadius: width/2 。

看到這個JSFiddle演示： http ： //jsfiddle.net/Wzs9L/

Answer 3

另一種實現此目的的方法是使用CSS覆蓋樣式。 只需將以下類添加到樣式表：

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

這將覆蓋SVG Rectangle元素的默認樣式。

Answer 4

有一個很容易解決的問題。 只需在圖表選項中設置以下屬性：

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

有關進一步參考，請查看highcharts api文檔 。

結帳這個jsFiddle 。