在for循环中创建多个图表

Question

如果我从服务器获得的答案是数字，我试图在每个问题上显示一个图表。问题是我只能在最后一个问题上显示图表。想知道每个问题如何显示一个图表？提前致谢。

protected void btnDownload_Click(object sender, EventArgs e)
{
    MemoryStream ms = new MemoryStream();
    TextWriter tw = new StreamWriter(ms, System.Text.Encoding.UTF8);
    var structures = KAWSLib.BusinessLayer.Structure.GetStructuresInService();
    // *** comma delimited
    tw.Write("Latitude, Longitude, CountySerial, StructureType, Orientation, District, RoutePre, RouteNo, LocationDesc");
    foreach (var s in structures)
    {
        tw.Write(Environment.NewLine + string.Format("{0:#.000000},{1:#.000000},{2},{3},{4},{5},{6},{7},{8}", s.LATITUDE, s.LONGITUDE, s.CO_SER, EscapeIfNeeded(s.SuperTypeLookup.SHORTDESC), EscapeIfNeeded(s.OrientationLookup.SHORTDESC), s.DISTRICT, s.ROUTE_PREFIX, s.RouteValue, EscapeIfNeeded(s.LOC_DESC)));
    }
    tw.Flush();
    byte[] bytes = ms.ToArray();
    ms.Close();

    Response.Clear();
    Response.ContentType = "application/force-download";
    Response.AddHeader("content-disposition", "attachment;    filename=" + string.Format("kaws-structures-{0:yyyy.MM.dd}.csv", DateTime.Today));
    Response.BinaryWrite(bytes);
    Response.End();
}

string EscapeIfNeeded(string s)
{
    if (s.Contains(","))
    {
        return "\"" + s.Replace("\"", "\"\"") + "\"";
    }
    else
    {
        return s;
    }
}

Answer 1

真实答案在这里 - ＆gt; JavaScript closure inside loops – simple practical example ......

基本上，divid随每个循环而变化。完成后，指向u的最后一个版本 图表功能然后尝试使用...

要避免的几种方法，但稍微重组应该可以做到这一点......

第一次：google.charts.load和setOnLoadCallback设计为每页加载运行一次

不是每次都应绘制图表

首先尝试加载谷歌，然后继续其余的

从success删除闭包或函数 - 应该纠正问题

请参阅以下摘录...

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  // Set a callback to run when the Google Visualization API is loaded.
  'callback': chooseSurv,
  // Set packages to use
  'packages': ['corechart']
});

function chooseSurv(number, name) {
  var j = number;
  var question = new Array();
  question = survQuestions[j];
  var questionType = new Array();
  questionType = survType[j];
  var outputans = "";
  var outputchart = "";
  var SurveyAnswer = Parse.Object.extend("someclass);
  var query = new Parse.Query(SurveyAnswer); query.descending("createdAt"); query.include("author"); query.include("survey"); query.equalTo("survey", somestring); query.find({
    success: function(results) {
      for (var u = 0; u < question.length; u++) {
        var questions = question[u];
        outputans += '<div id="ansbox">';
        if (questionType[u] / 1) {
          var divid = "chart_div" + j + u;
          console.log(divid);
          outputans += '<div id="' + divid + '" class="chart-box"></div>';
          outputans += '</div>';
          for (var k in results) {
            var answer = results[k].get("data")[u];
            var author = results[k].get("author");
            var name = author.get("name");
            outputans += '<h4>' + name + '</h4>';
            outputans += '<p>' + answer + '</p>';
            outputans += '</div>';
          }

          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Topping');
          data.addColumn('number', 'Slices');
          data.addRows([
            ['Mushrooms', 3],
            ['Onions', 1],
            ['Olives', 1],
            ['Zucchini', 1],
            ['Pepperoni', 2]
          ]);
          // Set chart options
          var options = {
            'title': 'How Much Pizza I Ate Last Night',
            'width': 400,
            'height': 300
          };
          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.PieChart(document.getElementById(divid));
          chart.draw(data, options);
          console.log(divid);
        } else {

注意：callback可以放在load声明中

一旦调用了callback

，就可以随时抽取图表

此callback可以用代替 ...

$(document).ready(function(){});

- 和/或 -

window.addEventListener('load', function () {}, false);