停止高图表覆盖容器

Stop Highcharts overwriting containers

本文关键字：覆盖 高图表      更新时间：2023-09-26

我写了这个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>

使用 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闭包 - 简单的实际示例

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

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（container+i）。

相关文章：