[英]Symbol-outline with pie chart -or- custom legend symbols
I have a pie chart with a white slice/segment and grey border
. 我有一个饼图,
white slice/segment and grey border
。 Unfortunately, the border does not apply to the legend icon! 不幸的是,边框不适用于图例图标! I am wondering if it's necessary to style the legend symbol separately.
我想知道是否有必要单独设置图例符号的样式。 I did not find any property in the API description.
我没有在API描述中找到任何属性。
There are two ideas, how to make this work. 有两个想法,如何使这项工作。 Which one will work?
哪一个会起作用?
Here's the example: http://jsfiddle.net/c2XVz/ 这是一个例子: http : //jsfiddle.net/c2XVz/
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
colors: [
'blue' ,
'red' ,
'silver' ,
'orange' ,
'green' ,
'grey' ,
'gold' ,
'rgba(80, 183, 123, 1)' ,
'rgba(128, 0, 102, 1)' ,
'rgba(150, 124, 100, 1)' ,
'rgba(193, 10, 0, 1)' ,
'rgba(91, 214, 235, 1)' ,
'rgba(90, 111, 137, 1)' ,
'rgba(212, 173, 156, 1)' ,
'rgba(145, 145, 145, 1)' ,
'rgba(146, 184, 214, 1)'
],
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Lorem ipsum 2013'
},
legend: {
align: 'right',
verticalAlign: 'top',
x: -60,
y: 72,
layout: 'vertical'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
slicedOffset: 20
}
},
series: [{
type: 'pie',
name: 'Expenses',
data: [
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
['Legend item', 20.0],
{
name: 'Not categorized',
y: 10.0,
color: '#ffffff',
borderColor: '#646464',
borderWidth: 0.5,
sliced: true,
selected: true
}
]
}]
});
});
Thank you for any clue… 谢谢你的任何线索......
I don't see any options in the API for this level of customization in drawing the legend symbol. 在绘制图例符号时,我没有在API中看到此级别的自定义选项。 It is pretty easy to hack in after the chart is rendered:
渲染图表后很容易入侵:
$(chart.series[0].data).each(function(i,slice){
$(slice.legendSymbol.element).attr('stroke-width','1');
$(slice.legendSymbol.element).attr('stroke','gray');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.