ハイチャートの円グラフを使用してドーナツ グラフを作成していますが、凡例のアイコンを円にしたいのですが、何かアイデアはありますか? 以下はモックアップと実際の Web バージョンです。ありがとう...
6153 次
4 に答える
6
ハイチャートの最近のバージョンではsymbolWidth: width
、 とsymbolRadius: width/2
内部で使用できますlegend: {}
。
この JSFiddle デモンストレーションを参照してください: http://jsfiddle.net/Wzs9L/
于 2014-07-29T15:35:26.953 に答える
5
円グラフに基づいてソリューションを用意しました。凡例は、HTML リストとして自動的にデータ ポイントで生成されます。次に、すべての要素がシリーズから色を取得し、CSS3 を使用して円オブジェクト (border-radius) を生成します。その結果、クリック イベントを追加する必要があります。
$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 に答える