如何使用Ajax填充我的圖表。

Question

我想使用下面注釋掉的ajax調用從外部文件（all-client-job-data-extended.js）導入數據，而不是上面的數據。 我怎樣才能做到這一點？ 我真的很掙扎。

 $(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 }); }) });

 <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>

Answer 1

試試這個解決方案：

data.js文件將包含：

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",
    }
];

-加載示例（HTML）：

<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> <!-- make sure your path is proper here! -->
    <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>

現在，變量json存在於您的JS名稱空間中。

如何使用Ajax填充我的圖表。

問題描述

1 個解決方案

解決方案1
2 2015-11-04 11:21:45

如何使用Ajax填充我的圖表。

問題描述

1 個解決方案

解決方案1 2 2015-11-04 11:21:45

解決方案1
2 2015-11-04 11:21:45