初始化按钮上的AMCharts单击事件

Initialize AMCharts on Button Click Event

本文关键字:单击 事件 AMCharts 按钮 初始化      更新时间:2023-09-26

我使用AMCharts股票图表来显示我的详细信息。我有下面的代码绘制AMChart。

AmCharts.ready(function () {
                generateChartData();
                createStockChart();
            });
            var chartData1 = [];
            var chartData2 = [];
            var chartData3 = [];
            var chartData4 = [];
            function generateChartData() {
                var firstDate = new Date("2013-01-01");
                alert('1 :' + firstDate);
                firstDate.setDate(firstDate.getDate() - 1500);
                alert(firstDate);
                firstDate.setHours(0, 0, 0, 0);
                for (var i = 0; i < 5; i++) {
                    var newDate = new Date(firstDate);
                    newDate.setDate(newDate.getDate() + i);
                    var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
                    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
                    var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                    var a3 = Math.round(Math.random() * (100 + i)) + 200;
                    var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                    var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
                    chartData1.push({
                        date: newDate,
                        value: a1,
                        volume: b1
                    });
                    chartData2.push({
                        date: newDate,
                        value: a2,
                        volume: b2
                    });
                    chartData3.push({
                        date: newDate,
                        value: a3,
                        volume: b3
                    });
                    chartData4.push({
                        date: newDate,
                        value: a4,
                        volume: b4
                    });
                }
            }
            function createStockChart() {
                var chart = new AmCharts.AmStockChart();
                // DATASETS //////////////////////////////////////////
                // create data sets first
                var dataSet1 = new AmCharts.DataSet();
                dataSet1.title = "first data set";
                dataSet1.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }
                , {
                    fromField: "volume",
                    toField: "volume"
                }
                ];
                dataSet1.dataProvider = chartData1;
                dataSet1.categoryField = "date";
                var dataSet2 = new AmCharts.DataSet();
                dataSet2.title = "second data set";
                dataSet2.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }
                , {
                    fromField: "volume",
                    toField: "volume"
                }
                ];
                dataSet2.dataProvider = chartData2;
                dataSet2.categoryField = "date";
                var dataSet3 = new AmCharts.DataSet();
                dataSet3.title = "third data set";
                dataSet3.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }
                , {
                    fromField: "volume",
                    toField: "volume"
                }
                ];
                dataSet3.dataProvider = chartData3;
                dataSet3.categoryField = "date";
                var dataSet4 = new AmCharts.DataSet();
                dataSet4.title = "fourth data set";
                dataSet4.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }
                , {
                    fromField: "volume",
                    toField: "volume"
                }
                ];
                dataSet4.dataProvider = chartData4;
                dataSet4.categoryField = "date";
                // set data sets to the chart
                chart.dataSets = [dataSet1, dataSet2, dataSet3, dataSet4];
                // PANELS ///////////////////////////////////////////
                // first stock panel
                var stockPanel1 = new AmCharts.StockPanel();
                stockPanel1.showCategoryAxis = false;
                stockPanel1.title = "Value";
                stockPanel1.percentHeight = 70;
                // graph of first stock panel
                var graph1 = new AmCharts.StockGraph();
                graph1.valueField = "value";
                graph1.comparable = true;
                graph1.compareField = "value";
                graph1.bullet = "round";
                graph1.bulletBorderColor = "#FFFFFF";
                graph1.bulletBorderAlpha = 1;
                graph1.balloonText = "[[title]]:<b>[[value]]</b>";
                graph1.compareGraphBalloonText = "[[title]]:<b>[[value]]</b>";
                graph1.compareGraphBullet = "round";
                graph1.compareGraphBulletBorderColor = "#FFFFFF";
                graph1.compareGraphBulletBorderAlpha = 1;
                stockPanel1.addStockGraph(graph1);
                // create stock legend
                var stockLegend1 = new AmCharts.StockLegend();
                stockLegend1.periodValueTextComparing = "[[percents.value.close]]%";
                stockLegend1.periodValueTextRegular = "[[value.close]]";
                stockPanel1.stockLegend = stockLegend1;

                // second stock panel
                var stockPanel2 = new AmCharts.StockPanel();
                stockPanel2.title = "Volume";
                stockPanel2.percentHeight = 30;
                var graph2 = new AmCharts.StockGraph();
                graph2.valueField = "volume";
                graph2.type = "column";
                graph2.showBalloon = false;
                graph2.fillAlphas = 1;
                stockPanel2.addStockGraph(graph2);
                stockPanel1.addStockGraph(graph1);
                var stockLegend2 = new AmCharts.StockLegend();
                stockLegend2.periodValueTextRegular = "[[value.close]]";
                stockPanel2.stockLegend = stockLegend2;
                // set panels to the chart
                chart.panels = [stockPanel1, stockPanel2];

                // OTHER SETTINGS ////////////////////////////////////
                var sbsettings = new AmCharts.ChartScrollbarSettings();
                sbsettings.graph = graph1;
                sbsettings.updateOnReleaseOnly = false;
                chart.chartScrollbarSettings = sbsettings;
                // CURSOR
                var cursorSettings = new AmCharts.ChartCursorSettings();
                cursorSettings.valueBalloonsEnabled = true;
                chart.chartCursorSettings = cursorSettings;

                // PERIOD SELECTOR ///////////////////////////////////
                var periodSelector = new AmCharts.PeriodSelector();
                periodSelector.position = "right";
                periodSelector.periods = [{
                    period: "DD",
                    count: 10,
                    label: "10 days"
                }, {
                    period: "MM",
                    selected: true,
                    count: 1,
                    label: "1 month"
                }, {
                    period: "YYYY",
                    count: 1,
                    label: "1 year"
                }, {
                    period: "YTD",
                    label: "YTD"
                }, {
                    period: "MAX",
                    label: "MAX"
                }];
                chart.periodSelector = periodSelector;

                // DATA SET SELECTOR
                var dataSetSelector = new AmCharts.DataSetSelector();
                dataSetSelector.position = "left";
                chart.dataSetSelector = dataSetSelector;
                chart.write('chartdiv');
            }

在我的页面中,我有一个按钮,当任何用户单击该按钮时,AMChart将绘制或加载详细信息。但这在某种程度上是不可能的。

从上面的代码中删除

AmCharts.ready(function () {});

,并删除"generateChartData(); createStockChart();"函数。简单的按钮点击功能,写在下面的代码。

<script>
        function callAmChart() {
            var chartData1 = [];
            var chartData2 = [];
            var chartData3 = [];
            var chartData4 = [];
            var firstDate = new Date();
            firstDate.setDate(firstDate.getDate() - 1500);
            firstDate.setHours(0, 0, 0, 0);
            for (var i = 0; i < 1500; i++) {
                var newDate = new Date(firstDate);
                newDate.setDate(newDate.getDate() + i);
                var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
                var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
                var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
                var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                var a3 = Math.round(Math.random() * (100 + i)) + 200;
                var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
                var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
                var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
                chartData1.push({
                    date: newDate,
                    value: a1,
                    volume: b1
                });
                chartData2.push({
                    date: newDate,
                    value: a2,
                    volume: b2
                });
                chartData3.push({
                    date: newDate,
                    value: a3,
                    volume: b3
                });
                chartData4.push({
                    date: newDate,
                    value: a4,
                    volume: b4
                });
            }

            var chart = new AmCharts.AmStockChart();
            // DATASETS //////////////////////////////////////////
            // create data sets first
            var dataSet1 = new AmCharts.DataSet();
            dataSet1.title = "first data set";
            dataSet1.fieldMappings = [{
                fromField: "value",
                toField: "value"
            }, {
                fromField: "volume",
                toField: "volume"
            }];
            dataSet1.dataProvider = chartData1;
            dataSet1.categoryField = "date";
            var dataSet2 = new AmCharts.DataSet();
            dataSet2.title = "second data set";
            dataSet2.fieldMappings = [{
                fromField: "value",
                toField: "value"
            }, {
                fromField: "volume",
                toField: "volume"
            }];
            dataSet2.dataProvider = chartData2;
            dataSet2.categoryField = "date";
            var dataSet3 = new AmCharts.DataSet();
            dataSet3.title = "third data set";
            dataSet3.fieldMappings = [{
                fromField: "value",
                toField: "value"
            }, {
                fromField: "volume",
                toField: "volume"
            }];
            dataSet3.dataProvider = chartData3;
            dataSet3.categoryField = "date";
            var dataSet4 = new AmCharts.DataSet();
            dataSet4.title = "fourth data set";
            dataSet4.fieldMappings = [{
                fromField: "value",
                toField: "value"
            }, {
                fromField: "volume",
                toField: "volume"
            }];
            dataSet4.dataProvider = chartData4;
            dataSet4.categoryField = "date";
            // set data sets to the chart
            chart.dataSets = [dataSet1, dataSet2, dataSet3, dataSet4];
            // PANELS ///////////////////////////////////////////
            // first stock panel
            var stockPanel1 = new AmCharts.StockPanel();
            stockPanel1.showCategoryAxis = false;
            stockPanel1.title = "Value";
            stockPanel1.percentHeight = 70;
            // graph of first stock panel
            var graph1 = new AmCharts.StockGraph();
            graph1.valueField = "value";
            graph1.comparable = true;
            graph1.compareField = "value";
            graph1.bullet = "round";
            graph1.bulletBorderColor = "#FFFFFF";
            graph1.bulletBorderAlpha = 1;
            graph1.balloonText = "[[title]]:<b>[[value]]</b>";
            graph1.compareGraphBalloonText = "[[title]]:<b>[[value]]</b>";
            graph1.compareGraphBullet = "round";
            graph1.compareGraphBulletBorderColor = "#FFFFFF";
            graph1.compareGraphBulletBorderAlpha = 1;
            stockPanel1.addStockGraph(graph1);
            // create stock legend
            var stockLegend1 = new AmCharts.StockLegend();
            stockLegend1.periodValueTextComparing = "[[percents.value.close]]%";
            stockLegend1.periodValueTextRegular = "[[value.close]]";
            stockPanel1.stockLegend = stockLegend1;

            // second stock panel
            var stockPanel2 = new AmCharts.StockPanel();
            stockPanel2.title = "Volume";
            stockPanel2.percentHeight = 30;
            var graph2 = new AmCharts.StockGraph();
            graph2.valueField = "volume";
            graph2.type = "column";
            graph2.showBalloon = false;
            graph2.fillAlphas = 1;
            stockPanel2.addStockGraph(graph2);
            var stockLegend2 = new AmCharts.StockLegend();
            stockLegend2.periodValueTextRegular = "[[value.close]]";
            stockPanel2.stockLegend = stockLegend2;
            // set panels to the chart
            chart.panels = [stockPanel1, stockPanel2];

            // OTHER SETTINGS ////////////////////////////////////
            var sbsettings = new AmCharts.ChartScrollbarSettings();
            sbsettings.graph = graph1;
            sbsettings.updateOnReleaseOnly = false;
            chart.chartScrollbarSettings = sbsettings;
            // CURSOR
            var cursorSettings = new AmCharts.ChartCursorSettings();
            cursorSettings.valueBalloonsEnabled = true;
            chart.chartCursorSettings = cursorSettings;

            // PERIOD SELECTOR ///////////////////////////////////
            var periodSelector = new AmCharts.PeriodSelector();
            periodSelector.position = "left";
            periodSelector.periods = [{
                period: "DD",
                count: 10,
                label: "10 days"
            }, {
                period: "MM",
                selected: true,
                count: 1,
                label: "1 month"
            }, {
                period: "YYYY",
                count: 1,
                label: "1 year"
            }, {
                period: "YTD",
                label: "YTD"
            }, {
                period: "MAX",
                label: "MAX"
            }];
            chart.periodSelector = periodSelector;

            // DATA SET SELECTOR
            //var dataSetSelector = new AmCharts.DataSetSelector();
            //dataSetSelector.position = "left";
            //chart.dataSetSelector = dataSetSelector;
            chart.write('chartdiv');
        }
    </script>

:: HTML PAGE::

<input type="button" value="Click" onclick="callAmChart();" />
    <div id="chartdiv" style="width: 100%; height: 600px; background: #fff;"></div>