Ich bin mit highcharts arbeiten und ein Diagramm ähnlich wie dies zu machen Ziel: Highchart Donut-Diagramm Anpassung
Jetzt wurde ich habe das Spiel mit der ganzen Tortur für eine Weile jetzt, und ich bin gekommen war der Lage, die folgende Nummer zu erreichen: 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'
}
}
});
});
});
ich verlassen einen benutzerdefinierten Kreis mit dem Gewicht Kennzeichnung denke den Raum leer in der Ringdiagramm und Einfügen. Aber ich bin nicht sicher, wie die folgenden Probleme zu lösen:
1) Leave mehr definiert weißen Flächen zwischen meinen beiden Säulen
2) Wie richtig Etiketten meine zwei Daten auszurichten? (Wie Sie im Modell sehen können, sind sie in einer geraden Linie mit neutralen Linien angebracht)
3) Wie die Daten unter den beiden Etiketten mit sowohl den Pfunden und dem Prozentsatz angezeigt werden, wie im Bild gezeigt.