代码之家 › 专栏 › 技术社区 › Sanjay Nakate

如何使用for循环数组为折线图动态添加系列

series highcharts for-loop jquery javascript

Sanjay Nakate · 技术社区 · 7 年前

我必须将数组传递给 series 它是从ajax代码生成的。我有多个字段/数组Linehart值 Result[i].MONTHLY_TOTAL_FTE ,每月 Result[i].MONTH + Result[i].YEAR 国 Result[i].COUNTRY_NAME 所以我必须根据这个来显示一个折线图。

我正在使用以下代码段

$.ajax({
                type: "GET",
                url: "/api/ReportAPI/GetMonthlyEmployeeFte",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (Result) {
                  var data = [];
                  var data2 = [];
                  var data3 = [];
                  for (var i in Result) {                     
                    var serie = new Array(Result[i].MONTH + Result[i].YEAR);
                    data.push(serie);
                    var fte = new Array(Result[i].MONTHLY_TOTAL_FTE);                       
                    data2.push(fte);
                    var contry = new Array(Result[i].COUNTRY_NAME);                      
                    data3.push(contry); 
                    }                    
                    DreawLineChart(data, data2, data3);                                                   
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            }); 


     function DreawLineChart(series, ssssss,contryname) {
     Highcharts.chart('container2', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Monthly Employee FTE'        },
        subtitle: {
            //text: 'Source: WorldClimate.com'
        },
        xAxis: {
            //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            categories: series
        },     
        yAxis: {
            title: {
                text: 'FTE'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        /* series: [{
             name: 'Singapore',
             data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

         }, {
             name: 'New Zealand',
             data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         }] */
           series: [{
               name:contryname, //'Singapore',
          data: JSON.parse("[" + ssssss + "]") //[3.9, 4.2, 5.7, 8.5] //ftes
          }]

    });
   }

问题是,它显示的是日本国家的数据,但它显示的是日本其他国家的数据。在新西兰、新加坡等其他国家,它显示出空白。

获取数据的我的sql存储过程

SELECT YEAR(POSBDGT.[PLAN_START_DATE]) as [POSITION_FTE_YEAR],
  MONTH(POSBDGT.[PLAN_START_DATE]) as [POSITION_FTE_MONTH_NO],
  CONVERT(varchar(3),DATENAME(month,POSBDGT.[PLAN_START_DATE])) as [POSITION_FTE_MONTH],
  SUM([TOTALFTE]) AS [TOTALFTE], 
  COMAST.[name]
  FROM [DBO].[POSITION_FTE] POSFTE WITH (NOLOCK)
  INNER JOIN [DBO].[POSITION_BUDGET] POSBDGT WITH (NOLOCK) ON POSFTE.POSITION_ID = POSBDGT.POSITION_ID
   INNER JOIN [DBO].POSITION_LOCATION POSLOC WITH (NOLOCK) ON POSLOC.POSITION_ID = POSFTE.POSITION_ID
  INNER JOIN [DBO].[country_master] COMAST WITH (NOLOCK) ON COMAST.[country_id] = POSLOC.COUNTRY_ID
  GROUP BY COMAST.[name], YEAR(POSBDGT.[PLAN_START_DATE]),DATENAME(month,POSBDGT.[PLAN_START_DATE]),MONTH(POSBDGT.[PLAN_START_DATE])

表格结果

1 回复 | 直到 7 年前

user9420984 user9420984 7 年前

您面临的问题是 series 如下所示:

series: [{
          name: ['England', 'Japan', 'Singapore']  //contryname
          data: JSON.parse("[" + [1, 2, 3, 4]+ "]") //ssssss

为了使Highcharts正常工作,您需要以下格式

    series: [{
                 name: 'Singapore',
                 data: [7.0, 6.9]

             }, {
                 name: 'New Zealand',
                 data: [3.9, 4.2]
             }]

您可以通过确保结果循环如下所示来实现这一点:

 $.ajax({
                type: "GET",
                url: "/api/ReportAPI/GetMonthlyEmployeeFte",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (Result) {
                      var data = []
                      var categories = []
                      for (var i in Result) {                     
                          var serie = new Array(Result[i].MONTH + Result[i].YEAR);
                          categories.push(serie);
                          var fte = {name: Result[i].COUNTRY_NAME, data: 
                                     [Result[i].MONTHLY_TOTAL_FTE]};                       
                          data.push(fte);      
                          }  
                  DreawLineChart(categories, data);                                                   
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            }); 





    function DreawLineChart(categories, dataArray) {
         Highcharts.chart('container2', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Monthly Employee FTE'        },
            subtitle: {
                //text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: categories
            },     
            yAxis: {
                title: {
                    text: 'FTE'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
             series: dataArray //This is where the new array of data appears

        });
       }

上面的代码获取结果并将其转换为我上面提到的格式。这应该可以解决你的问题。然而,我无法完全复制您的输入,因为它没有给出。