javascript - ejemplo - Cómo mostrar el valor en lugar del porcentaje en un gráfico circular usando jQuery Highcharts
highcharts demo (5)
para un proyecto mío, estoy usando un char char que se hizo con jQuery Highcharts. lo que me gustaría hacer es mostrar el valor que inserté en lugar del parentesco. ejemplo: el gráfico muestra firefox - 43.269 ...% en cambio me gusta mostrar el valor de Firefox -45 clics. Puede alguien ayudarme con esto. gracias por adelantado.
Código de la carta
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="../js/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="../js/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: ''browser_cart'',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''Browser market shares at a specific website, 2010''
},
tooltip: {
formatter: function() {
return ''<b>''+ this.point.name +''</b>: ''+ this.percentage +'' %'';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ''pointer'',
dataLabels: {
enabled: true,
color: ''#000000'',
connectorColor: ''#000000'',
formatter: function() {
return ''<b>''+ this.point.name +''</b>: ''+ this.percentage +'' clicks'';
}
}
}
},
series: [{
type: ''pie'',
name: ''Browser share'',
data: [
[''Firefox'', 45],
[''IE'', 26],
[''Chrome'', 12],
[''Safari'', 8],
[''Opera'', 6],
[''Others'', 7]
]
}]
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="browser_cart" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
Puedes usar point.y Highcharts Api Reference
En este caso, puede reemplazar "this.percentage" por "this.point.y"
Mire el formateador: http://www.highcharts.com/ref/#tooltip--formatter
Corregido, solo cambiado debajo de la línea
format: ''<b>{point.name}</b>: {point.percentage:.1f} %'',
a
format: ''<b>{point.name}</b>: {point.y:.1f} Rs.'',
return ''<b>''+ this.point.name +''</b>: ''+ this.y +'' clicks'';
Opciones de información sobre herramientas
Ejemplo:
Fuente: