Heim > Artikel > Backend-Entwicklung > Ausführliche Erklärung, wie man Daten dynamisch über PHP an Highcharts überträgt
Ausführliche Erklärung, wie man Daten dynamisch über PHP an Highcharts überträgt
- *文Original
- 2018-01-03 09:53:061298Durchsuche
In diesem Artikel werden hauptsächlich die relevanten Kenntnisse zur dynamischen Übertragung von Daten an Highcharts über PHP vorgestellt. Hat einen sehr guten Referenzwert. Werfen wir einen Blick mit dem Editor unten
1: Bei der täglichen Arbeit wird bei der Anzeige von Daten der JSON-String direkt über die vom Hintergrund zur Anzeige bereitgestellte Schnittstelle abgerufen. Heute hat jemand gefragt, wie man die angeforderten dynamischen Daten lokal demonstrieren kann.
2: Richten Sie die Umgebung lokal ein, ich verwende WampServer, Öffnen Sie localhost im Browser und die Dateien werden im Verzeichnis wamp/www gespeichert
3: PHP-Code, es gibt keinen Prozess zum Schreiben von Echtzeitanforderungen in die Datenbank.
<?php $b = array( array('name'=>'北京', 'y'=>20.2), array('name'=>'上海', 'y'=>9.6), array('name'=>'武汉', 'y'=>16.6), ); $data = json_encode($b); echo($data); ?>
4: HTML-Datei
Highcharts-bezogene Dateien können selbst heruntergeladen und importiert werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<style>
</style>
<script src="jquery-1.8.3.min.js"></script>
<script src="highcharts.js"></script>
<script src="modules/exporting.js"></script>
<script src="highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<p id="container" style="min-width:400px;height:400px"></p>
<script>
$(function () {
$.getJSON('http://localhost/index-1.php', function (csv) {
console.log(csv)
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'line',
name: '',
data: csv,
}]
});
});
});
</script>
</body>
</html>5: Führen Sie hier die js-Datei ein. Wenn Sie dieselbe JSON-Zeichenfolge als verschiedene Grafiken anzeigen müssen, ändern Sie den Typ in der Serie At Gleichzeitig können Sie verschiedene Grafiken anzeigen, indem Sie den Datenspaltenparameter plotOptions in Highcharts ändern. Highcharts kann Grafiktypen anzeigen.
PHP-Rückgabedatenformat: [{"name":u5317u4eac",y":20.2},{"name":u4e0au6d77"," y":9.6},{"name":u6b66u6c49",y":16.6}]: Wenn die angeforderten Daten verarbeitet werden müssen, beispielsweise wenn nur ein Teil der Daten benötigt wird, können Sie die Daten über anfordern get, Verarbeiten Sie das übergebene Array:
Verwandte Empfehlungen:
json transfer in php and js A Kurze Analyse von
PHP spricht kurz über die Entkopplung der Codearchitektur
PHP generiert Features Lesbare Zufallszeichenfolge
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man Daten dynamisch über PHP an Highcharts überträgt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!