3

ハイチャートの円グラフを使用してドーナツ グラフを作成していますが、凡例のアイコンを円にしたいのですが、何かアイデアはありますか? 以下はモックアップと実際の Web バージョンです。ありがとう...

ここに画像の説明を入力

4

4 に答える 4

6

ハイチャートの最近のバージョンではsymbolWidth: width、 とsymbolRadius: width/2内部で使用できますlegend: {}。

この JSFiddle デモンストレーションを参照してください: http://jsfiddle.net/Wzs9L/

于 2014-07-29T15:35:26.953 に答える
5

円グラフに基づいてソリューションを用意しました。凡例は、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;
}
于 2013-06-11T15:06:26.957 に答える
1

これを実現する別の方法は、CSS を使用してスタイルをオーバーライドすることです。以下のクラスをスタイルシートに追加するだけです。

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

これにより、SVG Rectangle 要素のデフォルト スタイルがオーバーライドされます。

于 2016-06-12T14:33:13.757 に答える
0

かなり簡単な修正があります。chartoptions で次のプロパティを設定するだけです。

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

詳細については、highcharts API ドキュメントを確認してください。

このjsFiddleをチェックしてください。

于 2016-04-29T09:38:39.497 に答える