我正在与highcharts一起工作,旨在制作类似于以下内容的图表:
现在,我已经经历了一段时间的磨难,现在我已经能够达到以下几点:http : //jsfiddle.net/ccjSy/24/
$(function () {
$(document).ready(function () {
var chart = null;
var categories = ['Body Fat', 'Lean Mass'],
name = 'Body Fat vs. Lean Mass',
data = [{
y: 69,
color: '#F0CE0C',
drilldown: {
name: 'Body Fat',
color: '#F0CE0C'
}
}, {
y: 207,
color: '#23A303',
drilldown: {
name: 'Lean Mass' ,
color: '#23A303'
}
}];
// Build the data array
var browserData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'donutchart',
type: 'pie',
spacingTop: 0
},
title: {
text: 'Your Body Fat vs Lean Mass',
style: {"color": '#7d7d7d'}
},
series: [{
name: 'Weight',
data: browserData,
dataLabels: {
style: {
fontFamily: 'ArialMT',
fontSize: '15px',
fontWeight: 'bold',
color: '#7d7d7d'
}
},
innerSize: '70%'
}],
tooltip: {
valueSuffix: ' lbs'
},
plotOptions: {
series: {
cursor: 'pointer'
}
}
});
});
});
我正在考虑在甜甜圈图中将空间保留为空,并使用“重量”标签插入自定义圆圈。但是,我不确定如何解决以下问题:
1)在两列之间保留更多定义的空白
2)如何正确对齐两个数据标签?(正如您在模型中看到的那样,它们在一条直线上并附有中性线)
3)如何在两个标签下方显示数据,磅和百分比都显示在图像中,如图所示。
回答您的三个问题:
plotOptions.pie.borderWidth
元素。默认值为1。我使用5为其提供了更多的空白。“是否正确对齐两个数据标签? ”-您可以startAngle
基于两个数据值计算自定义,这将为您提供正确的开始角度。由于系列中只有两个数据值,因此很容易。
计算饼图的startAngle
var startAngle = 0 - (90 + (180 * (data[0].y / (data[0].y + data[1].y))));
请注意,如果您更改y
第一个数据对象的值,即使饼图的部分变大或变小,饼图的“ Body Fat”部分仍将保持其正确位置。
“使用自定义格式在两个标签下面显示数据吗? ”-用于plotOptions.pie.format
将自定义格式应用于饼图值标签。
format: '<div style="position: relative; top: -20px; text-align: center">{point.name}<br><b><span style="font-size: 29px">{point.percentage:.0f}%</span></b> ({point.y} lbs)</div>'
这是工作的JSFiddle来查看结果。您仍然需要在饼图的后面添加一个深灰色的圆圈,并添加“总重量”文本,但这并不难。
因为我敢肯定您会对此感到疑惑,所以我要指出的是,饼图标题下有很多空白,因为它为在饼图的上方或下方显示的其他标签留出了足够的空间。由于您仅使用两个始终位于饼图左侧/右侧的值,因此不会改变HighCharts准备在周围区域显示其他标签的事实。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句