關於”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.一起學習共同 進步


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com