Highcharts utilizzano zona intervallo di grafico e linee
L'esempio seguente dimostra l'uso della mappa e linee di sezione.
Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni. Modificare l'attributo tipo di grafico.
configurazione grafico
Il grafico dell'attributo tipo è impostato su arearange, chart.type descrive il tipo di grafico. Il valore di default è "linea".
var chart = {
type: 'arearange'
};
Esempi
Nome file: highcharts_area_rangeline.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 ranges = [
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 29.6],
[1246665600000, 16.7, 30.7],
[1246752000000, 16.5, 25.0],
[1246838400000, 17.8, 25.7],
[1246924800000, 13.5, 24.8],
[1247011200000, 10.5, 21.4],
[1247097600000, 9.2, 23.8],
[1247184000000, 11.6, 21.8],
[1247270400000, 10.7, 23.7],
[1247356800000, 11.0, 23.3],
[1247443200000, 11.6, 23.7],
[1247529600000, 11.8, 20.7],
[1247616000000, 12.6, 22.4],
[1247702400000, 13.6, 19.6],
[1247788800000, 11.4, 22.6],
[1247875200000, 13.2, 25.0],
[1247961600000, 14.2, 21.6],
[1248048000000, 13.1, 17.1],
[1248134400000, 12.2, 15.5],
[1248220800000, 12.0, 20.8],
[1248307200000, 12.0, 17.1],
[1248393600000, 12.7, 18.3],
[1248480000000, 12.4, 19.4],
[1248566400000, 12.6, 19.9],
[1248652800000, 11.9, 20.2],
[1248739200000, 11.0, 19.3],
[1248825600000, 10.8, 17.8],
[1248912000000, 11.8, 18.5],
[1248998400000, 10.8, 16.1]
];
var averages = [
[1246406400000, 21.5],
[1246492800000, 22.1],
[1246579200000, 23],
[1246665600000, 23.8],
[1246752000000, 21.4],
[1246838400000, 21.3],
[1246924800000, 18.3],
[1247011200000, 15.4],
[1247097600000, 16.4],
[1247184000000, 17.7],
[1247270400000, 17.5],
[1247356800000, 17.6],
[1247443200000, 17.7],
[1247529600000, 16.8],
[1247616000000, 17.7],
[1247702400000, 16.3],
[1247788800000, 17.8],
[1247875200000, 18.1],
[1247961600000, 17.2],
[1248048000000, 14.4],
[1248134400000, 13.7],
[1248220800000, 15.7],
[1248307200000, 14.6],
[1248393600000, 15.3],
[1248480000000, 15.3],
[1248566400000, 15.8],
[1248652800000, 15.2],
[1248739200000, 14.8],
[1248825600000, 14.4],
[1248912000000, 15],
[1248998400000, 13.6]
];
var title = {
text: 'July temperatures'
};
var xAxis = {
type: 'datetime'
};
var yAxis = {
title: {
text: null
}
};
var tooltip = {
shared: true,
crosshairs: true,
valueSuffix: '\xB0C'
};
var legend = {
}
var series= [{
name: 'Temperature',
data: averages,
zIndex: 1,
marker: {
fillColor: 'white',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[0]
}
}, {
name: 'Range',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
zIndex: 0
}
];
var json = {};
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
L'output sopra esempio è: