JavaScript 出现问题，显示数据的 AJAX 代码

Question

我需要您提供一些提示，以便为我的 JavaScript、AJAX 和 JSON 数据问题找到一个好的解决方案。我想在我的网页上用条形图（我正在使用 HighCharts）填充一个通用集。数据采用 JSON 格式，从一开始我只使用日期和值作为配对数据集。该解决方案工作正常，我只有一个条形图，但我的页面上有很多图表，我需要显示所有图表（最多十二个）。

现在我想调整以显示多个图表。在 DataMacro 数组下方的代码中，图表可以正常工作。它还有一个与 .现在我在页面中有一系列的，比如 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'
        }
      }
    }]
  }));
}