Highcharts diseño fijo gráfico de barras
Highcharts gráfico de columnas
El siguiente ejemplo muestra un gráfico de barras diseño fijo.
En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones. Añadir en la configuración pointPlacement y pointPadding serie.
series.pointPadding
El control de la distancia entre el valor de cada columna, cuando se fija el ancho del gráfico Highcharts, cuanto mayor sea el valor, menor será el ancho de la columna, mientras que lo contrario. El valor por defecto es de 0,1
series.pointPlacement
En un gráfico de columnas, cuando pointPlacement ajustado en "on", el eje X Punto ningún intervalo. Si pointPlacement ajustado a "entre", entre las columnas por el diseño escala.
3.0.2 versión después de Highcharts, pointPlacement puede apoyar, valor digital 0 del eje, el valor actual de -0,5 y un valor del intervalo anterior y el valor actual de 0,5 para el siguiente valor de intervalo. A diferencia de opciones de ajuste de texto, ajuste digital no afecta el intervalo entre los ejes.
series: {
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}Ejemplos
Nombre del archivo: highcharts_column_fixed.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>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'column'
};
var title = {
text: 'Efficiency Optimization by Branch'
};
var xAxis = {
categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
};
var yAxis = [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}];
var legend = {
shadow: false
};
var tooltip = {
shared: true
};
var credits = {
enabled: false
};
var plotOptions = {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
};
var series= [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: [183.6, 178.8, 198.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: [203.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.credits = credits;
json.legend = legend;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
La salida del ejemplo anterior es: