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

时间:2018-03-30 08:37:43

标签: javascript jquery for-loop highcharts series

我必须将数组传递给var response = UrlFetchApp.fetch(imageTokenURL); var selection = DocumentApp.getActiveDocument().getSelection(); if (selection) { Logger.log("Got Selection"); var replaced = false; var elements = selection.getRangeElements(); if (elements.length === 1 && elements[0].getElement().getType() === DocumentApp.ElementType.INLINE_IMAGE) { //replace the URL -- this never happens } //otherwise, we take the first element and work from there: var firstElem = elements[0].getElement(); Logger.log("First Element Type = " + firstElem.getType()); if (firstElem.getType() == DocumentApp.ElementType.PARAGRAPH) { var newImage = firstElem.asParagraph().insertInlineImage(0, response); newImage.setHeight(200); newImage.setWidth(200); } else if (firstElem.getType() == DocumentApp.ElementType.TEXT) { var p = firstElem.getParent(); if (p.getType() == DocumentApp.ElementType.PARAGRAPH) { var index = p.asParagraph().getChildIndex(firstElem); var newImage = p.asParagraph().insertInlineImage(index, response); newImage.setHeight(200); newImage.setWidth(200); } } } else { Logger.log("Checking Cursor"); var cursor = DocumentApp.getActiveDocument().getCursor(); if (cursor) { Logger.log("Got Cursor: " + cursor); var newImage = cursor.insertInlineImage(response); var p = cursor.getElement(); var size=200; newImage.setHeight(size); newImage.setWidth(size); } } ,这是从ajax代码生成的。 我有多个字段/数组Linehart值series,MonthYear Result[i].MONTHLY_TOTAL_FTE,国家Result[i].MONTH + Result[i].YEAR 所以我必须根据这个显示折线图。

我正在使用以下代码段

Result[i].COUNTRY_NAME

问题在于它显示了日本国家的数据,但显示了日本其他国家的数据。其他国家如新西兰,新加坡显示空白。

chart

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

$.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
          }]

    });
   }

表结果

table

1 个答案:

答案 0 :(得分:1)

您遇到的问题是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

        });
       }

上面的代码获取结果并将其转换为我上面提到的格式。这应该是解决你的问题。但是,由于没有给出,我无法完全重现您的输入。