點擊事件後顯示圖表

Question

我在玩amcharts。

雖然我可以讓this example在啓動時工作，但在單擊事件後執行此功能時，圖表不會顯示出來。函數本身正在調用（function called正在打印到控制檯中），但圖表未顯示。

<button onclick="show()"> 
    Show me! 
</button> 

function show() { 
    console.log("function called") 
    var chart; 

    var chartData = [{ 
    "ax": 1, 
    "ay": 0.5, 
    "bx": 1, 
    "by": 2.2 
    }, { 

// ... 

    }); 
} 

這是fiddle。

Answer 1

如果調用函數show自己不需要的功能AmCharts.ready：

function show() { 
 
    var chart; 
 

 
    var chartData = [{ 
 
    "ax": 1, 
 
    "ay": 0.5, 
 
    "bx": 1, 
 
    "by": 2.2 
 
    }, { 
 
    "ax": 2, 
 
    "ay": 1.3, 
 
    "bx": 2, 
 
    "by": 4.9 
 
    }, { 
 
    "ax": 3, 
 
    "ay": 2.3, 
 
    "bx": 3, 
 
    "by": 5.1 
 
    }, { 
 
    "ax": 4, 
 
    "ay": 2.8, 
 
    "bx": 4, 
 
    "by": 5.3 
 
    }, { 
 
    "ax": 5, 
 
    "ay": 3.5, 
 
    "bx": 5, 
 
    "by": 6.1 
 
    }, { 
 
    "ax": 6, 
 
    "ay": 5.1, 
 
    "bx": 6, 
 
    "by": 8.3 
 
    }, { 
 
    "ax": 7, 
 
    "ay": 6.7, 
 
    "bx": 7, 
 
    "by": 10.5 
 
    }, { 
 
    "ax": 8, 
 
    "ay": 8, 
 
    "bx": 8, 
 
    "by": 12.3 
 
    }, { 
 
    "ax": 9, 
 
    "ay": 8.9, 
 
    "bx": 9, 
 
    "by": 14.5 
 
    }, { 
 
    "ax": 10, 
 
    "ay": 9.7, 
 
    "bx": 10, 
 
    "by": 15 
 
    }, { 
 
    "ax": 11, 
 
    "ay": 10.4, 
 
    "bx": 11, 
 
    "by": 18.8 
 
    }, { 
 
    "ax": 12, 
 
    "ay": 11.7, 
 
    "bx": 12, 
 
    "by": 19 
 
    }]; 
 

 
    // XY CHART 
 
    chart = new AmCharts.AmXYChart(); 
 

 
    chart.dataProvider = chartData; 
 
    chart.startDuration = 1; 
 

 
    // AXES 
 
    // X 
 
    var xAxis = new AmCharts.ValueAxis(); 
 
    xAxis.title = "X Axis"; 
 
    xAxis.position = "bottom"; 
 
    xAxis.dashLength = 1; 
 
    xAxis.axisAlpha = 0; 
 
    xAxis.autoGridCount = true; 
 
    chart.addValueAxis(xAxis); 
 

 
    // Y 
 
    var yAxis = new AmCharts.ValueAxis(); 
 
    yAxis.position = "left"; 
 
    yAxis.title = "Y Axis"; 
 
    yAxis.dashLength = 1; 
 
    yAxis.axisAlpha = 0; 
 
    yAxis.autoGridCount = true; 
 
    chart.addValueAxis(yAxis); 
 

 
    // GRAPHS 
 
    // triangles up 
 
    var graph1 = new AmCharts.AmGraph(); 
 
    graph1.lineColor = "#FF6600"; 
 
    graph1.balloonText = "x:[[x]] y:[[y]]"; 
 
    graph1.xField = "ax"; 
 
    graph1.yField = "ay"; 
 
    graph1.lineAlpha = 0; 
 
    graph1.bullet = "triangleUp"; 
 
    chart.addGraph(graph1); 
 

 
    // triangles down 
 
    var graph2 = new AmCharts.AmGraph(); 
 
    graph2.lineColor = "#FCD202"; 
 
    graph2.balloonText = "x:[[x]] y:[[y]]"; 
 
    graph2.xField = "bx"; 
 
    graph2.yField = "by"; 
 
    graph2.lineAlpha = 0; 
 
    graph2.bullet = "triangleDown"; 
 
    chart.addGraph(graph2); 
 

 
    // first trend line 
 
    var trendLine = new AmCharts.TrendLine(); 
 
    trendLine.lineColor = "#FF6600"; 
 
    trendLine.initialXValue = 1; 
 
    trendLine.initialValue = 2; 
 
    trendLine.finalXValue = 12; 
 
    trendLine.finalValue = 11; 
 
    chart.addTrendLine(trendLine); 
 

 
    // second trend line 
 
    trendLine = new AmCharts.TrendLine(); 
 
    trendLine.lineColor = "#FCD202"; 
 
    trendLine.initialXValue = 1; 
 
    trendLine.initialValue = 1; 
 
    trendLine.finalXValue = 12; 
 
    trendLine.finalValue = 19; 
 
    chart.addTrendLine(trendLine); 
 

 
    // CURSOR 
 
    var chartCursor = new AmCharts.ChartCursor(); 
 
    chart.addChartCursor(chartCursor); 
 

 
    // SCROLLBAR 
 

 
    var chartScrollbar = new AmCharts.ChartScrollbar(); 
 
    chartScrollbar.scrollbarHeight = 5; 
 
    chartScrollbar.offset = 15 
 
    chart.addChartScrollbar(chartScrollbar); 
 
    // WRITE 
 
    chart.write("chartdiv"); 
 
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/xy.js"></script> 
 

 
<div id="chartdiv" style="width: 100%; height: 400px;"></div> 
 

 
<button onclick="show()"> 
 
    Show me! 
 
</button>