S. *_*ner 3 legend highcharts pie-chart
我正在Highcharts中创建一个带有图例的饼图.当我将系列指定为值数组(我的首选方法)时,图例会为每个值显示字符串"Slice".如果我将系列指定为具有命名值的对象列表,我会正确地看到数据名称.如果我将系列指定为值数组,是否可以看到数据名称？
这是代码不起作用,但我想使用:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
xAxis: {
categories: ["BADHAM, J", "COPPOLA, F", "GUILERMAN, J", "HILLER, A",
"SPIELBERG, S"],
},
series: [{
name: 'Directors',
data: [74100000, 30673000, 36915000, 50000000, 90434000],
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
当我将系列指定为具有命名值的对象列表时,以下代码可以正常工作:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
series: [{
name: "Directors",
slicedOffset: 20,
data: [{
name: "BADHAM, J",
y: 74100000
}, {
name: "COPPOLA, F",
y: 30673000
}, {
name: "GUILERMAN, J",
y: 36915000
}, {
name: "HILLER, A",
y: 50000000
}, {
name: "SPIELBERG, S",
y: 90434000
}]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
你可以做到这一点tooltip.formatter,并legend.labelFormatter和访问highchart选项.
对于工具提示文本:
tooltip: {
formatter: function() {
var sliceIndex = this.point.index;
var sliceName = this.series.chart.axes[0].categories[sliceIndex];
return 'The value for <b>' + sliceName +
'</b> is <b>' + this.y + '</b>';
}
},
对于传说:
legend: {
enabled: true,
labelFormatter: function() {
var legendIndex = this.index;
var legendName = this.series.chart.axes[0].categories[legendIndex];
return legendName;
}
},
现场演示.
| 归档时间： |
|
| 查看次数： |
4619 次 |
| 最近记录： |