Istogramma con posizionamento fisso
Di seguito è riportato un esempio di un istogramma con posizionamento fisso.
Abbiamo già visto la configurazione utilizzata per disegnare un grafico nel capitolo Sintassi della configurazione di Highcharts . Vediamo ora ulteriori configurazioni e anche come le abbiamo aggiuntepointPlacement e pointPadding sotto serie.
Di seguito viene fornito un esempio di istogramma con posizionamento fisso.
series.pointPadding
Riempimento tra ogni colonna o barra, in unità dell'asse x; il valore predefinito è 0,1.
series.pointPlacement
In un istogramma, quando pointPlacement è "on", il punto non creerà alcun riempimento dell'asse X. In un istogramma polare, ciò significa che la prima colonna punta direttamente a nord. Se il pointPlacement è "between", le colonne verranno disposte tra le tacche. Questo può essere utile per visualizzare una quantità tra due punti nel tempo o in un determinato settore di una carta polare.
A partire da Highcharts 3.0.2, il posizionamento del punto può anche essere numerico, dove 0 è sul valore dell'asse, -0,5 è tra questo valore e il precedente e 0,5 è tra questo valore e il successivo. A differenza delle opzioni testuali, le opzioni di posizionamento dei punti numerici non influenzano il riempimento degli assi.
series: {
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2
}Esempio
highcharts_column_fixed.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://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>Risultato
Verifica il risultato.