溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何通過php動態傳數據到highcharts，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1：在平時工作中，在對數據進行展示的時候，是直接通過后臺提供的接口來獲取json串，用來展示。今天別人問怎么在本地演示一下請求的動態數據。
2：在本地搭建環境，我用的WampServer，下載地址：http://xiazai.jb51.net/201703/yuanma/WampServer_2.5_jb51.rar，瀏覽器打開localhost,文件存放在wamp/www目錄下
3：php代碼，沒有寫與數據庫實時請求的過程。
<?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文件
<!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">
<link rel="icon" href="https://static.jianshukeji.com/hcode/images/favicon.ico">
<style>
</style>
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" ></div>
<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：在這里，引入js文件，當需要對一個相同的json串展示為不同的圖形時，修改series里的type屬性，同時修改highcharts里的數據列參數plotOptions，就可以展示不同的圖形了，highcharts可顯示圖形類型。
php返回數據格式：[{"name":"\u5317\u4eac","y":20.2},{"name":"\u4e0a\u6d77","y":9.6},{"name":"\u6b66\u6c49","y":16.6}]，當需要對請求的數據進行處理時，比如只需要其中一部分的數據時，可以在通過get請求數據時，對傳過來的數組進行處理：
以上是“如何通過php動態傳數據到highcharts”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
