關於”echarts-JSON請求數據”一文讀者反映chart無法顯示數據的分析
問題原文地址：http://blog.csdn.net/you23hai45/article/details/51585506#reply
1.大家反饋的問題：
頁面框架和圖表框架都有，控制台也可以看到json文件的內容，但是就是不顯示數據
2.先說自己的解決方法吧：
2.1解決辦法：
2.2 瀏覽器端截圖：
3.代碼
3.1鏈接源代碼：原文地址：http://blog.csdn.net/you23hai45/article/details/51585506#reply
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts-JSON請求數據</title>
<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/echarts.js" ></script>
<script>
$(document).ready(function(){
var chart = document.getElementById('chart');
var chartData = echarts.init(chart);
chartData.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
$.get('../js/data.json').done(function (data) {
console.dir(data);
// 填入數據
chartData.setOption({
xAxis: {
data: data.categories
},
series: [{
name: '銷量',
data: data.data
}]
});
});
function eConsole(param)
{
console.dir(param);
}
chartData.on("click",eConsole);
});
</script>
</head>
<body>
<div id="chart" style="width: 1900px; height: 900px;"></div>
</body>
</html>
{
"categories": [
"蘋果",
"橘子",
"荔枝",
"桃子",
"栗子",
"梨子",
"柿子"
],
"data": [
500,
280,
386,
190,
107,
207,
452
]
}
3.2 我的代碼
主要是引入echarts、jQuery路徑不同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts-JSON請求數據</title>
<script src="echarts.min.js"></script>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
var chart = document.getElementById('chart');
var chartData = echarts.init(chart);
chartData.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
$.get('data.json').done(function (data) {
console.dir("data:"+data);//看着像Json
console.dir("data.categories:"+data.categories);//居然是Undefind
console.dir("data.data:"+data.dat);//居然是Undefind
console.dir(typeof(data))//你會發現控制台輸出的是String
// 填入數據
var data = JSON.parse(data);//加上這行，將Sring類型的data轉換為JSON形式
chartData.setOption({
xAxis: {
data: data.categories
},
series: [{
name: '銷量',
data: data.data
}]
});
});
function eConsole(param)
{
console.dir(param);
}
chartData.on("click",eConsole);
});
</script>
</head>
<body>
<div id="chart" style="width: 1900px; height: 900px;"></div>
</body>
</html>
data.json
{
"categories": [
"apple",
"orange",
"litchi",
"peach",
"Chestnuts",
"Pears",
"Persimmon"
],
"data": [
500,
280,
386,
190,
107,
207,
452
]
}
4.延伸討論：
jQuery $.get().done()的用法
5.一起學習共同 進步
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。