Amchart 在与 html 标记一起列出时不显示<select>

Question

我之前的问题是将json数据附加到amcharts，在挣扎了一段时间之后，我让它按照我想要的方式运行。但是当我将其从测试页面移动到与其他图表一起列出的页面时，它似乎不起作用。当我单击空白图表时，此错误出现在控制台中

Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.xToIndex (serial.js:14)
    at b.handleCursorMove (serial.js:8)
    at Object.a.inherits.b.fire (amcharts.js:1)
    at Object.dispatchMovedEvent (amcharts.js:27)
    at Object.handleMouseDown (amcharts.js:26)
    at b.handleMouseDown (serial.js:1)
    at HTMLDivElement.<anonymous> (amcharts.js:18)

下面是当我将其放在单独的页面上时可以工作的代码

  var chart = AmCharts.makeChart("chart1", {
    "type": "serial",
    "dataLoader": {
      "url": "#myURL"
    },
    "valueAxes": [{
      "title": "Load Average",
      "gridColor": "#FFFFFF",
      "gridAlpha": 0.2,
      "dashLength": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
            "id": "AmGraph-1",
            "lineThickness": 3,
      "valueField": "LoadAverage"
    }],
    "chartCursor": {
      "categoryBalloonEnabled": false,
      "cursorAlpha": 0,
      "zoomable": false
    },
    "categoryField": "EndTimeLoop",
    "categoryAxis": {
      "title": "End Time Loop",
      "gridPosition": "start",
      "gridAlpha": 0,
      "tickPosition": "start",
      "tickLength": 20,
      "labelRotation": 90
    }
  });
  function setDataSet(dataset_url) {
    AmCharts.loadFile(dataset_url, {}, function(data) {
      chart.dataProvider = AmCharts.parseJSON(data);
      chart.validateData();
    });
  };

这是在 HTML 端进行选择的部分

<div class="chartWrapper" id="chartSingleTest1">
              <select onchange="showChart(this.options[this.selectedIndex].value);">
                  <option value="chart1">Chart #1</option>
                  <option value="chart2">Chart #2</option>
                  <option value="chart3">Chart #3</option>
                </select>
              <div id="chart1" class="chartBoxSingle" style="display: none;"></div>
              <div id="chart2" class="chartBoxSingle" style="display: none;"></div>
              <div id="chart3" class="chartBoxSingle" style="display: none;"></div>
            </div>

这是JS部分，其中在页面加载时选择第一个选项

var currentChart;
function showChart( divid ) {
  if (currentChart !== undefined)
    currentChart.style.display = "none";
  if ( divid ) {
    currentChart = document.getElementById(divid);
    currentChart.style.display = "block";
  }
  else {
    currentChart = undefined;
  }
}
$(document).ready(function() { showChart('chart1'); });

Answer 1

将图表的显示从none切换到block时，必须调用图表对象的validateSize方法，如本使用选项卡的示例所示。下面是使用结构的另一个示例：

var charts = {};
charts["chart1"] = AmCharts.makeChart("chart1", {
  type: "serial",
  dataProvider: [{
    "value": 1,
    "category": "Category 1"
  }, {
    "value": 2,
    "category": "Category 2"
  }, {
    "value": 3,
    "category": "Category 3"
  }],
  categoryField: "category",
  graphs: [{
    valueField: "value",
    type: "column",
    fillAlphas: .8
  }]
});
charts["chart2"] = AmCharts.makeChart("chart2", {
  type: "pie",
  dataProvider: [{
    "value": 2,
    "title": "Slice 1"
  }, {
    "value": 2,
    "title": "Slice 2"
  }, {
    "value": 2,
    "category": "Slice 3"
  }],
  titleField: "title",
  valueField: "value"
});
var currentChart;
function showChart(divid) {
  if (currentChart !== undefined)
    currentChart.style.display = "none";
  if (divid) {
    currentChart = document.getElementById(divid);
    currentChart.style.display = "block";
    charts[divid].validateSize();
  } else {
    currentChart = undefined;
  }
}
$(document).ready(function() {
  showChart('chart1');
});

.chartBoxSingle {
  width: 100%;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/pie.js"></script>
<div class="chartWrapper" id="chartSingleTest1">
  <select onchange="showChart(this.options[this.selectedIndex].value);">
    <option value="chart1">Chart #1</option>
    <option value="chart2">Chart #2</option>
  </select>
  <div id="chart1" class="chartBoxSingle" style="display: none;"></div>
  <div id="chart2" class="chartBoxSingle" style="display: none;"></div>
</div>