当使用html <select>标签列出时,Amchart不会显示

时间:2018-03-07 12:14:21

标签: amcharts

我之前的问题是将json数据附加到amcharts上,经过一段时间的努力,我按照我想要的方式运行它。但是,当我将它从测试页面移动到将与其他图表一起列出的页面时,它似乎无法正常工作。当我单击空白图表时,控制台中会出现此错误 未捕获的TypeError:无法读取属性&#39; length&#39;未定义的     at Object.xToIndex(serial.js:14)     在b.handleCursorMove(serial.js:8)     在Object.a.inherits.b.fire(amcharts.js:1)     at Object.dispatchMovedEvent(amcharts.js:27)     at Object.handleMouseDown(amcharts.js:26)     在b.handleMouseDown(serial.js:1)     在HTMLDivElement。&lt; anonymous&gt; (amcharts.js:18) 下面是我在单独的页面上使用时的代码   var chart = AmCharts.makeChart(&#34; chart1&#34;,{     &#34;输入&#34;:&#34; serial&#34;,     &#34; dataLoader&#34;:{       &#34; url&#34;:&#34; #myURL&#34;     },     &#34; valueAxes&#34;:[{       &#34; title&#34;:&#34; Load Average&#34;,       &#34; gridColor&#34;:&#34; #FFFFFF&#34;,       &#34; gridAlpha&#34;:0.2,       &#34; dashLength&#34;:0     }],     &#34; gridAboveGraphs&#34;:是的,     &#34; startDuration&#34;:1,     &#34;图表&#34;:[{       &#34; balloonText&#34;:&#34; [[category]]的[[title]]:[[value]]&#34;,             &#34; id&#34;:&#34; AmGraph-1&#34;,             &#34; lineThickness&#34;:3,       &#34; valueField&#34;:&#34; LoadAverage&#34;     }],     &#34; chartCursor&#34;:{       &#34; categoryBalloonEnabled&#34;:false,       &#34; cursorAlpha&#34;:0,       &#34; zoomable&#34;:false     },     &#34; categoryField&#34;:&#34; EndTimeLoop&#34;,     &#34; categoryAxis&#34;:{       &#34; title&#34;:&#34; End Time Loop&#34;,       &#34; gridPosition&#34;:&#34; start&#34;,       &#34; gridAlpha&#34;:0,       &#34; tickPosition&#34;:&#34;开始&#34;,       &#34; tickLength&#34;:20,       &#34; labelRotation&#34;:90     }   });   function setDataSet(dataset_url){     AmCharts.loadFile(dataset_url,{},function(data){       chart.dataProvider = AmCharts.parseJSON(data);       chart.validateData();     });   }; 这是选择在html端发生的部分 &lt; div class =&#34; chartWrapper&#34; ID =&#34; chartSingleTest1&#34;&GT;               &lt; select onchange =&#34; showChart(this.options [this.selectedIndex] .value);&#34;&gt;                   &lt; option value =&#34; chart1&#34;&gt; Chart#1&lt; / option&gt;                   &lt; option value =&#34; chart2&#34;&gt; Chart#2&lt; / option&gt;                   &lt; option value =&#34; chart3&#34;&gt; Chart#3&lt; / option&gt;                 &LT; /选择&GT;               &lt; div id =&#34; chart1&#34;类=&#34; chartBoxSingle&#34; style =&#34; display:none;&#34;&gt;&lt; / div&gt;               &lt; div id =&#34; chart2&#34;类=&#34; chartBoxSingle&#34; style =&#34; display:none;&#34;&gt;&lt; / div&gt;               &lt; div id =&#34; chart3&#34;类=&#34; chartBoxSingle&#34; style =&#34; display:none;&#34;&gt;&lt; / div&gt;             &LT; / DIV&GT; 这里是js part,它选择页面加载的第一个选项 var currentChart; function showChart(divid){   if(currentChart!== undefined)     currentChart.style.display =&#34; none&#34 ;;   if(divid){     currentChart = document.getElementById(divid);     currentChart.style.display =&#34; block&#34 ;;   }   其他{     currentChart = undefined;   } } $(document).ready(function(){showChart(&#39; chart1&#39;);});

1 个答案:

答案 0 :(得分:1)

当您将图表的显示从validateSize切换为none时,您必须调用图表对象的block方法,如this example that uses tabs所示。这是使用您的结构的另一个例子:

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>