Question

我想使用下面注释掉的ajax调用从外部文件（all-client-job-data-extended.js）导入数据，而不是上面的数据。我怎样才能做到这一点？我真的很挣扎。

＆＃13;

$(document).ready(function () {

	
	var json=
	[
		 {
			"Hot": false,
			"Country": "NETHERLANDS",
			"DomCountry": "NA",
			"DomPortCode": "*PI",
			"Code": "RTM",
			"Origin": "NL",
			"CodeDest": "NA",
		 },
		 {
			"Hot": true,
			"Country": "GREAT BRITAIN",
			"DomCountry": "POLAND",
			"DomPortCode": "*PI",
			"Code": "CAL",
			"Origin": "GB",
			"CodeDest": "PL",
		 },
		 {
			"Hot": true,
			"Country": "GREAT BRITAIN",
			"DomCountry": "POLAND",
			"DomPortCode": "*PI",
			"Code": "CAL",
			"Origin": "GB",
			"CodeDest": "PL",
		 }
	];
	
	 
		var countryCounts = {};
		var countryNames  = [];
		var totalCount    = 0;

  
		/*  I want to use this Ajax call to import the data from an external file (all-client-job-data-extended.js) instead of having it above.  How can I do this? I am really struggling. 

		$.ajax({
			url: "all-client-job-data-extended.js", 
			dataType: 'json',
			success: function(r){
				window.json = r;
			}
		});
		*/
	
	
		//loop through the object
		$.each(json, function(i, node) {
			
			//get the country name
			var countryName = node["Country"];
			
			//build array of unique country names
			if($.inArray(countryName, countryNames) == -1) {
			   countryNames.push(countryName);
			}
			   
			//add or increment a count for the country name
			if(typeof countryCounts[countryName] == 'undefined') {
				countryCounts[countryName] = 1;
			}
			else {
				countryCounts[countryName]++;
			}
			
			//increment the total count so we can calculate %
			totalCount++;
		});
	
		//console.log(countryNames);

		var data = [];

		//loop through unique countries to build data for chart
		$.each(countryNames, function(i, countryName) {
			data.push({
				name: countryName,
				y: Math.round((countryCounts[countryName] / totalCount) * 100)
			});
		});
		//console.log(data);

		// chart stuff ------------------------------------
		var chart;
		var type 		 = 'bar';
		var titleText    = 'Test Chart Title';
		var subTitleText = 'Test Chart Subtitle';

		$(function() {
			$('#container').highcharts({
				chart       : { type    : type          },
				title       : { text    : titleText     },
				subtitle    : {  text   : subTitleText  },
				legend      : { enabled : false          },
				tooltip     : {
					shared 		: true,
					crosshairs	: true
				},
				plotOptions : {
					series  	: {
					}
				},
				xAxis      : { 
					categories: [],
					title  : { text: null },
					labels : { style : { fontWeight: 'bold' }
					}
				},
				yAxis      : { 
					title  : { text: null },
					labels : { 
						formatter: function() {
							return this.isLast ? this.value + '%' : this.value;
						}
					}
				}
			});	
			chart = $('#container').highcharts();
			chart.addSeries({ data: data });
			
			
		})
	
});

＆＃13;

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
		<script src="https://code.highcharts.com/highcharts.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		<title>Highchart</title>
	</head>
<body>
	<h1>Highchart</h1>
		
	<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

</body>
</html>

＆＃13;

Answer 1

试试这个解决方案：

Arrays.sort(pairs, new PairComparator());文件将包含：

data.js

- 加载示例（HTML）：

var json = [
      {
        "Hot": false,
        "Country": "NETHERLANDS",
        "DomCountry": "NA",
        "DomPortCode": "*PI",
        "Code": "RTM",
        "Origin": "NL",
        "CodeDest": "NA",
     },
     {
        "Hot": true,
        "Country": "GREAT BRITAIN",
        "DomCountry": "POLAND",
        "DomPortCode": "*PI",
        "Code": "CAL",
        "Origin": "GB",
        "CodeDest": "PL",
     },
     {
        "Hot": true,
        "Country": "GREAT BRITAIN",
        "DomCountry": "POLAND",
        "DomPortCode": "*PI",
        "Code": "CAL",
        "Origin": "GB",
        "CodeDest": "PL",
    }
];

现在JS名称空间中存在变量<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="data.js"></script>  <title>Highchart</title> </head> <body> <h1>Highchart</h1> <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> </body> </html>。

如何使用Ajax填充我的高图。

1 个答案: