Question

我编写了这个javaScript函数来为输入的csv文件生成图形。多个csv文件的地址在graph_data中。

我将其作为循环而不是分开的原因是因为“graph_data”中的csv文件数量可能会有所不同。

这个功能似乎有效，但它显示了最后一个csv的图形，而不是早期的csv文件。如果我改变循环运行的次数，它会在同一个HTML页面上生成其他图形，但不会同时生成所有图形。

我认为Highcharts会覆盖之前的图表，但我不知道如何修复它。

使用Javascript：

      <script type="text/javascript">
      var arrayLength = {{graph_data}}.length;

      for (var i = 0; i < arrayLength; i++) {
          data = ({{graph_data}}[i]);

          var container="#container"+i;

          $.get(data, function(csv) {

              $(container).highcharts({
                  chart: {
                      zoomType: 'x',
                      type: 'column',
                      renderTo: 'container'+i
                  },
                  data: {
                      csv: csv,
                      lineDelimiter: "\n"
                  },
                  title: {
                      text: "title"
                  },
                  yAxis: {
                      title: {
                          text: 'Units'
                      }
                  },
                  plotOptions: {
                      series: {
                          marker: {
                              enabled: false
                          }
                      }
                  }
              });

          });
      }

      </script>

HTML：

<div id="container0" style="width:100%; height:1400px;"></div>        
<div id="container1" style="width:100%; height:1400px;"></div>

Answer 1

您需要动态创建div，然后生成highcharts。创建一个包含所有图表配置的函数，并执行以下操作：

var parent_div =$( "#yourParentDivId" ).append( "div" ).attr( "class", "someclass" ); 
var child_div = parent_div.append( "div" ).attr( "id", container"+i);
var chart_data = getChartData(  graph_data[i], container"+i);
var chart = new Highcharts.Chart( chart_data );

在getChartdata方法中，您必须提供系列数据并动态创建div的ID（容器+ i）。

Answer 2

使用jQuery.each()或Array.prototype.forEach()。

<强> jQuery.each（）：

$.each({{graph_data}}, function (i, data) {
  $.get(data, function(csv) {
    $('#container' + i).highcharts({
      chart: {
        zoomType: 'x',
        type: 'column',
      },
      data: {
        csv: csv,
        lineDelimiter: "\n"
      }
    });
  });
});

<强> Array.prototype.forEach（）：

{{graph_data}}.forEach(function (data, i) {
  $.get(data, function(csv) {
    $('#container' + i).highcharts({
      chart: {
        zoomType: 'x',
        type: 'column',
      },
      data: {
        csv: csv,
        lineDelimiter: "\n"
      }
    });
  });
});

为什么？

请参阅此问题和答案。

JavaScript closure inside loops – simple practical example

停止Highcharts覆盖容器

2 个答案:

为什么？