Mais conteúdo relacionado
Semelhante a Htmlgraficcode (20)
Htmlgraficcode
- 1. direccion
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-
software/highcharts.com/tree/master/samples/highcharts/demo/line-labels/
$(function () {
$('#container').highcharts({
colors: ["#FFFC01", "#F60505", "#000000"],
chart: {
zoomType: 'xy',
type: 'column',
width: 650,
height: 400
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
margin: 0
},
xAxis: {
categories: ['Nov', 'Dic', 'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun',
'Jul', 'Ago', 'Sep', 'Oct']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
yAxis: [
{ // Primary yAxis
title: {
text: 'Cantidad Operaciones',
style: {
color:
Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ',
//rotation: -45,
style: {
color:
Highcharts.getOptions().colors[0]
}
},
stackLabels: {
enabled: true,
//rotation: -45,
style: {
fontWeight: 'bold',
color: (Highcharts.theme &&
Highcharts.theme.textColor) || 'black'
}
},
- 2. opposite: true
},
{ // Secondary yAxis
title: {
text: 'Cantidad Cuentas Usuarios',
style: {
color:
Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} ',
style: {
color:
Highcharts.getOptions().colors[1]
}
}
},
],
tooltip: {
shared: true
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 0,
floating: false,
backgroundColor: (Highcharts.theme &&
Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
column: {
//stacking: 'none',
dataLabels: {
enabled: true,
//rotation: -1,//rotation: -90,
color: '#FFFFFF',
//y: -5, // 10 pixels down from the
top
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
},
align: 'center',
verticalAlign: 'top',
}
}
},
series: [{
- 3. name: 'Consultas',
data: [0, 0, 114, 224, 169, 210, 287, 398, 128, 111, 280, 8],
dataLabels: {
y: -5, // 10 pixels down from the top
}
}, {
name: 'Movimientos',
data: [0, 0, 60, 26, 27, 102, 52, 5, 37, 35, 26, 5],
dataLabels: {
y: 5, // 10 pixels down from the top
}
},
{
yAxis: 1,
name: 'Usuarios',
type: 'spline',
dataLabels: {
enabled: true,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
},
//align: 'center',
},
data: [0, 0, 3, 4, 5, 8, 11, 15, 17, 16,
14, 10]
}
]
});
});