grafica - Gráfico de columnas agrupadas de Highcharts con varios grupos?
legend highcharts example (4)
Estoy buscando crear un gráfico de columnas agrupadas en Highcharts, excepto con múltiples grupos en un día determinado. El gráfico se vería así http://www.highcharts.com/demo/column-stacked-and-grouped (de esta pregunta del foro http://highslide.com/forum/viewtopic.php?f=9&t=19575 ) , excepto con cada barra apilada reemplazada por un conjunto agrupado de columnas (no apiladas). Por lo tanto, veríamos varios grupos de columnas por día, con la idea de que cada grupo corresponde a un usuario. ¿Alguien sabe como hacer esto?
editar: Aquí hay un jsfiddle que he encontrado http://jsfiddle.net/pMA2H/1/
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>ElementStacks - jsFiddle demo</title>
<script type=''text/javascript'' src=''http://code.jquery.com/jquery-1.4.2.js''></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>
<script type=''text/javascript'' src="http://highcharts.com/js/testing.js"></script>
<style type=''text/css''>
</style>
<script type=''text/javascript''>//<![CDATA[
$(function(){
/*
Data is:
Gross Amount Cost Amount
Services Australia 20 10
Germany 30 15
Manufacturing Australia 35 17
Germany 25 12
----
Would like to be able define my categories hierarchically - example:
xAxis: [{
categories: [{
name: ''Services''
children: [''Australia'', ''Germany'']
},{
name: ''Manufacturing''
children: [''Australia'', ''Germany'']
}]
}]
and get a result similar to what is fudged up by using the renderer on the right.
*/
var chart = new Highcharts.Chart({
chart: {
renderTo: ''container'',
type: ''column''
},
xAxis: [{
categories: [''Australia'', ''Germany'', ''Australia'', ''Germany''],
labels: {
y: 40
}
}],
legend: {
margin: 40
},
series: [{
name: ''Gross'',
data: [[''Services'', 20],[''Services'',30],[''Manufacturing'', 35],[''Manufacturing'', 25]]
},{
name: ''Cost'',
data: [[''Services'', 10],[''Services'',15],[''Manufacturing'', 17],[''Manufacturing'', 13]]
}]
}, function(chart){
$(''.highcharts-axis:first > text'').each(function() {
this.setAttribute(''y'', parseInt(this.getAttribute(''y'')) - 20)
});
var text1 = chart.renderer.text("Services", 150, 340).add();
var text2 = chart.renderer.text("Manufacturing", 350, 340).add();
});
});//]]>
</script>
</head>
<body>
<div id="container" style="height: 400px; width: 500px"></div>
</body>
</html>
del hilo aquí http://highcharts.uservoice.com/forums/55896-general/suggestions/2230615-grouped-x-axis#comments . Sin embargo, el código para los incrementos del eje x es un poco tedioso, porque debe agregar manualmente cada incremento e incluir su espaciado para asegurarse de que sus puntos de datos se alineen. He hecho gráficos anteriormente donde puedes especificar un pointStart y un pointInterval para las fechas. Si alguien sabe de una solución más elegante, sería genial.
A menos que haya algo más que no esté explicando, lo que está pidiendo es el comportamiento predeterminado de un gráfico de columnas agrupadas:
http://jsfiddle.net/jlbriggs/TfvGp/
.
todo lo que se requiere para lograr esto es series de datos múltiples y un tipo de ''columna''
Puede usar el complemento para categorías agrupadas, aquí lo puede encontrar: https://github.com/blacklabel/grouped_categories
Para resolver este problema, necesitas apilar en una variable que no se puede apilar. Me gusta: serie: {
{
name: ''boys'',
stack: 1,
data: [2, 6, 5,0]
}
{
name: ''girls'',
stack: 2,
data: [0, 6, 1,3]
}
} No apilar con 1,2,3,4, etc.
Tuve el mismo problema y lo resolví con HighCharts. Necesita algunos datos mágicos, pero el resultado es justo.
Vea aquí: https://.com/a/31029535/461499