Highcharts gráfico de barras gama
Highcharts gráfico de columnas
Los siguientes ejemplos muestran el gráfico de barras rango.
En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones.
configuración gráfica
Configurar el tipo de gráfico 'columnrange'. chart.type describe el tipo de gráfico. El valor por defecto es "línea".
var chart = {
type: 'columnrange',
inverted: true
};
Ejemplos
Nombre del archivo: highcharts_column_range.htm
<html>
<head>
<title>Highcharts 教程 | 本教程(w3big.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'columnrange',
inverted:true
};
var title = {
text: 'Temperature variation by month'
};
var subtitle = {
text: 'Observed in Vik i Sogn, Norway, 2009'
};
var xAxis = {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
};
var yAxis = {
title: {
text: 'Temperature ( \xB0C )'
}
};
var tooltip = {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
};
var plotOptions = {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '\xB0C';
}
}
}
};
var credits = {
enabled: false
};
var series= [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
json.plotOptions = plotOptions;
json.credits = credits;
$('#container').highcharts(json);
});
</script>
</body>
</html>
La salida del ejemplo anterior es: