Highcharts carte dynamique
Ce chapitre, nous allons introduire Highcharts carte dynamique.
Dans la section précédente, nous savons déjà la syntaxe de configuration Highcharts. Regardons les autres configurations Highcharts.
Mettre à jour deuxième graphique
chart.events
Méthode de charge Ajouté (graphique des événements de charge) de la propriété chart.event. En 1000 millisecondes générées aléatoirement les points de données et de générer des graphiques.
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);
}
}
}
Exemples
Nom du fichier: 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>
L'exemple ci-dessus sortie est:
En cliquant sur Ajouter des données
chart.events
Ajouter méthode click (cliquez sur l'événement sur l'ensemble de la zone de traçage du graphique eu lieu) dans la propriété chart.event. Cette méthode sur la zone de traçage du graphique va ajouter un nouveau point de données click se produit.
chart: {
events: {
click: function (e) {
// 获取点击坐标和数据项
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// 添加点击的坐标
series.addPoint([x, y]);
}
}
}
Exemples
Nom du fichier: 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>
L'exemple ci-dessus sortie est: