在JavaScript，顯示數據的AJAX代碼中存在問題

Question

我需要一些提示來解決我的JavaScript，AJAX和JSON數據問題。我想在我的網頁上使用barcharts（我正在使用HighCharts）填充通用集合。數據是JSON格式，從一開始我只使用日期和值作爲配對數據集。該解決方案工作正常，我只有一個條形圖，但我的頁面上有很多圖表，我需要顯示所有圖表（最多12個）。

現在我想調整顯示多個圖形。在下面的代碼中，DataMacro數組對圖表工作正常。它也有一個硬編碼的ID匹配a。現在我在頁面中有一系列如id = barchart11，id = barchar21等等。在數據集中，我製作了一個名爲PanelCodeUI的標記，我將使用循環數據集。問題是如何做到這一點。現在每個循環都會填寫所有日期，所有容器的值。

此外，我需要重構顯示條形圖的功能。最好的方法是使用數據數組和panelCodeUI id調用一個函數，只需替換條形圖的名稱並按原樣在datamacro中進行設置即可。但我不知道該怎麼做。數據混合在所有容器中，我需要在發送到函數之前收集所有數據。那麼AJAX和JavaScript的問題是異步的。我需要確保它的行爲正確和快速。

也許我需要改變我的數據集，或者我需要在幾步找到所有的船隻ID，然後再做一次AJAX調用，從船上獲取日期，值對然後顯示。我希望有一種方法用這個數據集來做到這一點，希望有人能幫助我在此

這裏有點JSON數據集：

[ 
{"__type":"Demo.Entities.OilProductionLast5DaysEntity","Date":1465084800000,"Value":844,"VesselId":1,"SectorId":2,"PanelCodeUI":"21","VesselCodeUI":"21","VesselSorting":1}, 

{"__type":"Demo.Entities.OilProductionLast5DaysEntity","Date":1465084800000,"Value":8720,"VesselId":4,"SectorId":1,"PanelCodeUI":"11","VesselCodeUI":"12","VesselSorting":2}, 

{"__type":"Demo.Entities.OilProductionLast5DaysEntity","Date":1465084800000,"Value":948,"VesselId":5,"SectorId":1,"PanelCodeUI":"11","VesselCodeUI":"11","VesselSorting":1}, 

{"__type":"Demo.Entities.OilProductionLast5DaysEntity","Date":1465084800000,"Value":0,"VesselId":6,"SectorId":3,"PanelCodeUI":"31","VesselCodeUI":"31","VesselSorting":1}, 

{"__type":"Demo.Entities.OilProductionLast5DaysEntity","Date":1465171200000,"Value":2067,"VesselId":1,"SectorId":2,"PanelCodeUI":"21","VesselCodeUI":"21","VesselSorting":1} 
] 

這裏是JavaScript代碼到目前爲止：

$(function() { 
      var datamacro = []; 
      $.ajax({ 
       type: "POST", 
       url: '../Services/HighChartService.asmx/GetOilProductionLast5DaysByActiveVessels', 
       data: '', 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (seriedata) { 
        console.log(JSON.stringify(seriedata.d)); 
        var productions = seriedata.d; 

        $.each(productions, function (index, productions) { 
         var yval = productions.Value; 
         var xval = productions.Date; 
         var x = [xval, yval]; 
         datamacro.push(x); 

         //alert("productions Name: " + productions.Date + "\nID: " + productions.Value); 
        }); 

        $(function() { 
         //var bchart = '#barchart' + vesselindex.toString(); 

         // want this to be looped with generic names like #barchart11, #barchart21, #barchart31 and so on 
         $('#barchart11').highcharts({ 
          chart: { 
           type: 'column' 
          }, 
          title: { 
           text: 'LAST FIVE DAYS' 
          }, 
          subtitle: { 
           text: '' 
          }, 
          xAxis: { 
           type: "datetime", 
           tickInterval: 24 * 3600 * 1000, 
           labels: { 
            rotation: -45, 
            align: 'right' 
           }, 
           dateTimeLabelFormats: { // don't display the dummy year 
            day: '%e. %b', 
           }, 
           //crosshair: true 
          }, 
          credits: { 
           enabled: false 
          }, 
          yAxis: { 
           labels: { 
            enabled: false 
           }, 
           title: { 
            text: null 
           } 

          }, 
          tooltip: { 
           formatter: function() { 
            return Highcharts.dateFormat('%d/%m/%Y', new Date(this.x)) + '<br/>' + ' in barrels: ' + this.y; 
           } 
          }, 
          plotOptions: { 
           column: { 
            pointPadding: 0.2, 
            borderWidth: 0 
           }, series: { 
            pointRange: 24 * 3600 * 1000, // one day 
            pointInterval: 3600 * 1000 
           } 
          }, 
          series: [{ 
           //name: '', 
           showInLegend: false, 
           data: datamacro, 
           dataLabels: { 
            enabled: true, 
            rotation: -90, 
            color: '#FFFFFF', 
            align: 'right', 
            format: '{point.y:.1f}', // one decimal 
            y: 10, // 10 pixels down from the top 
            style: { 
             fontSize: '13px', 
             fontFamily: 'Verdana, sans-serif' 
            } 
           } 
          }] 
         }); 
        }); 
       }, 
       error: function (r) { 
        alert(r.responseText); 
       }, 
       failure: function (r) { 
        alert(r.responseText); 
       } 
      }); 
     }); 

Answer 1

如果我理解正確，你想繪製每個不同panelCodeUI的圖表？

如果是這樣的話，AJAX的成功與後更改代碼：

var productions = seriedata.d; 

var listPanelCodeUI = productions.map(function(p){return p.PanelCodeUI}).filter(function(item, pos, self) { 
    return self.indexOf(item) == pos; 
}); 
//listPanelCodeUI : [21,11,31] 

listPanelCodeUI.sort(); 

listPanelCodeUI.forEach(function(e){ 

    datamacro = []; 

    //Create a div for each panelCodeUI 
    $("body").append("<div id='barchart" + e + "'></div>"); 

    var divId = "#barchart"+e; 

    //Filter productions for specific panelCodeUI 
    var data = productions.filter(function(p){return p.panelCodeUI === e}); 

    data.forEach(function(d){ 
     var yval = d.Value; 
     var xval = d.Date; 
     var x = [xval, yval]; 
     datamacro.push(x); 
    }); 

    $(function() { 
     $(divId).highcharts({ 

     ... 

     }) 
    }) 
} 

Answer 2

這就是你需要分析你的數據是什麼：

charts = []; 
$.each(productions.map(function(el) { 
    return el.PanelCodeUI; 
    }).filter(function(el, index, arr) { 
    return arr.indexOf(el) === index; 
    }), function(index,PanelCodeUI) { 
    var serie = productions.filter(function(el) { 
     return el.PanelCodeUI === PanelCodeUI; 
    }); 
    $.each(serie, function(index, production) { 
     datamacro.push([production.Value, production.Date]); 
    }); 
    drawChart('#barchart' + PanelCodeUI, 'LAST FIVE DAYS', datamacro); 
    }); 

而且我做了這個輔助函數來創建圖表：

function drawChart(containerID, chartTitle, data) { 
    charts.push(new Highchart.Chart({ 
    chart: { 
     type: 'column', 
     renderTo: containerID 
    }, 
    title: { 
     text: chartTitle 
    }, 
    subtitle: { 
     text: '' 
    }, 
    xAxis: { 
     type: "datetime", 
     tickInterval: 24 * 3600 * 1000, 
     labels: { 
     rotation: -45, 
     align: 'right' 
     }, 
     dateTimeLabelFormats: { // don't display the dummy year 
     day: '%e. %b', 
     }, 
     //crosshair: true 
    }, 
    credits: { 
     enabled: false 
    }, 
    yAxis: { 
     labels: { 
     enabled: false 
     }, 
     title: { 
     text: null 
     } 

    }, 
    tooltip: { 
     formatter: function() { 
     return Highcharts.dateFormat('%d/%m/%Y', new Date(this.x)) + '<br/>' + ' in barrels: ' + this.y; 
     } 
    }, 
    plotOptions: { 
     column: { 
     pointPadding: 0.2, 
     borderWidth: 0 
     }, 
     series: { 
     pointRange: 24 * 3600 * 1000, // one day 
     pointInterval: 3600 * 1000 
     } 
    }, 
    series: [{ 
     //name: '', 
     showInLegend: false, 
     data: data, 
     dataLabels: { 
     enabled: true, 
     rotation: -90, 
     color: '#FFFFFF', 
     align: 'right', 
     format: '{point.y:.1f}', // one decimal 
     y: 10, // 10 pixels down from the top 
     style: { 
      fontSize: '13px', 
      fontFamily: 'Verdana, sans-serif' 
     } 
     } 
    }] 
    })); 
}