Highcharts mapa dinámico
En este capítulo vamos a introducir Highcharts mapa dinámico.
En la sección anterior que ya sabemos sintaxis de configuración Highcharts. Veamos las otras configuraciones Highcharts.
Actualizar segundo gráfico
chart.events
método de carga añadido (evento de carga Chart) Propiedad chart.event. En el año 1000 milisegundos generados aleatoriamente puntos de datos y generar gráficos.
chart: {
events: {
load: function () {
// 图表每秒更新一次
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // 当期时间
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
}
Ejemplos
Nombre del archivo: highcharts_dynamic_spline.htm
<html>
<head>
<meta charset="UTF-8" />
<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: 'spline',
animation: Highcharts.svg, // don't animate in IE < IE 10.
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
};
var title = {
text: 'Live random data'
};
var xAxis = {
type: 'datetime',
tickPixelInterval: 150
};
var yAxis = {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
};
var plotOptions = {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
};
var legend = {
enabled: false
};
var exporting = {
enabled: false
};
var series= [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],time = (new Date()).getTime(),i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.exporting = exporting;
json.series = series;
json.plotOptions = plotOptions;
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts(json);
});
</script>
</body>
</html>
La salida del ejemplo anterior es:
Al hacer clic en la opción Agregar datos
chart.events
Añadir método click (click caso en toda el área de trazado del gráfico producido) en la propiedad chart.event. Este método en el área de trazado del gráfico añadirá un nuevo punto de datos se produce clic.
chart: {
events: {
click: function (e) {
// 获取点击坐标和数据项
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// 添加点击的坐标
series.addPoint([x, y]);
}
}
}
Ejemplos
Nombre del archivo: highcharts_dynamic_click.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="/try/demo_source/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: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function (e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// Add it
series.addPoint([x, y]);
}
}
};
var title = {
text: 'User supplied data'
};
var subtitle = {
text: 'Click the plot area to add a point. Click a point to remove it.'
};
var xAxis = {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
};
var yAxis = {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var legend = {
enabled: false
};
var exporting = {
enabled: false
};
var plotOptions = {
series: {
lineWidth: 1,
point: {
events: {
'click': function () {
if (this.series.data.length > 1) {
this.remove();
}
}
}
}
}
};
var series= [{
data: [[20, 20], [80, 80]]
}];
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.legend = legend;
json.exporting = exporting;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
</body>
</html>
La salida del ejemplo anterior es: