Question

我使用amcharts

默认JAVA代码是：

<script src="js/amcharts.js" type="text/javascript"></script>
<script src="js/serial.js" type="text/javascript"></script>

<script type="text/javascript">
    var chartData = [
        <?php
            $sql = mysql_query("SELECT * FROM `today` ORDER BY `date` DESC LIMIT 15");
            while ($row = mysql_fetch_array($sql)){
                $view = $row["view"];
                $ip = $row["ip"];
                $date = date("m-d",strtotime($row["date"]));
                echo '{
                    "date": "'.$date.'",
                    "distance": '.$ip.',
                    "duration": '.$view.'
                },';
            }
        ?>
    ];
    var chart;

    AmCharts.ready(function () {
        // SERIAL CHART
        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData;
        chart.categoryField = "date";
        chart.dataDateFormat = "DD";
        chart.marginTop = 10;

        // AXES
        // category axis
        var categoryAxis = chart.categoryAxis;
        categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
        categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD                
        categoryAxis.autoGridCount = false;
        categoryAxis.gridCount = 50;
        categoryAxis.gridAlpha = 0.05;
        categoryAxis.gridColor = "#000000";
        categoryAxis.axisColor = "#555555";

        // as we have data of different units, we create two different value axes
        // Duration value axis            
        var durationAxis = new AmCharts.ValueAxis();
        durationAxis.title = "";
        durationAxis.gridAlpha = 0.05;
        durationAxis.axisAlpha = 0;
        durationAxis.inside = 0;
        // the following line makes this value axis to convert values to duration
        // it tells the axis what duration unit it should use. mm - minute, hh - hour...                

        chart.addValueAxis(durationAxis);

        // Distance value axis 
        var distanceAxis = new AmCharts.ValueAxis();
        distanceAxis.title = "";
        distanceAxis.gridAlpha = 0;
        distanceAxis.position = "";
        distanceAxis.inside = false;
        distanceAxis.unit = "";
        distanceAxis.axisAlpha = 0;
        distanceAxis.labelsEnabled = false;
        chart.addValueAxis(distanceAxis);

        // GRAPHS
        // duration graph
        var durationGraph = new AmCharts.AmGraph();
        durationGraph.title = "duration";
        durationGraph.valueField = "duration";
        durationGraph.type = "line";
        durationGraph.valueAxis = durationAxis; // indicate which axis should be used
        durationGraph.lineColor = "#CC0000";
        durationGraph.balloonText = "[[value]] View";
        durationGraph.lineThickness = 1;
        durationGraph.legendValueText = "[[value]]";
        durationGraph.bullet = "square";
        durationGraph.bulletBorderColor = "#CC0000";
        durationGraph.bulletBorderAlpha = 1;
        durationGraph.bulletBorderThickness = 1;
        chart.addGraph(durationGraph);

        // distance graph
        var distanceGraph = new AmCharts.AmGraph();
        distanceGraph.valueField = "distance";
        distanceGraph.title = "distance";
        distanceGraph.type = "column";
        distanceGraph.fillAlphas = 0.1;
        distanceGraph.valueAxis = distanceAxis; // indicate which axis should be used
        distanceGraph.balloonText = "[[value]] IP";
        distanceGraph.legendValueText = "[[value]] mi";
        distanceGraph.legendPeriodValueText = "total: [[value.sum]] mi";
        distanceGraph.lineColor = "#000000";
        distanceGraph.lineAlpha = 0;
        chart.addGraph(distanceGraph);

        // CURSOR                
        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.zoomable = false;
        chartCursor.categoryBalloonDateFormat = "DD";
        chartCursor.cursorAlpha = 0;
        chart.addChartCursor(chartCursor);


        // WRITE                                
        chart.write("chartdiv");
    });
</script>

HTML代码是：

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

此代码工作正常，没有任何问题

但是在点击jquery之后没有在CHARTDIV中重新加载amcharts

我的代码：

$(document).on('click', '.list a', function(){
        var chartData = [
            <?php
                $sql = mysql_query("SELECT * FROM `today` ORDER BY `date` ASC LIMIT 15");
                while ($row = mysql_fetch_array($sql)){
                    $view = $row["view"];
                    $ip = $row["ip"];
                    $date = date("m-d",strtotime($row["date"]));
                    echo '{
                        "date": "'.$date.'",
                        "distance": '.$ip.',
                        "duration": '.$view.'
                    },';
                }
            ?>
        ];
        var chart;
        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "date";
            chart.dataDateFormat = "DD";
            chart.marginTop = 10;

            // AXES
            // category axis
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
            categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD                
            categoryAxis.autoGridCount = false;
            categoryAxis.gridCount = 50;
            categoryAxis.gridAlpha = 0.05;
            categoryAxis.gridColor = "#000000";
            categoryAxis.axisColor = "#555555";

            // as we have data of different units, we create two different value axes
            // Duration value axis            
            var durationAxis = new AmCharts.ValueAxis();
            durationAxis.title = "";
            durationAxis.gridAlpha = 0.05;
            durationAxis.axisAlpha = 0;
            durationAxis.inside = 0;
            // the following line makes this value axis to convert values to duration
            // it tells the axis what duration unit it should use. mm - minute, hh - hour...                

            chart.addValueAxis(durationAxis);

            // Distance value axis 
            var distanceAxis = new AmCharts.ValueAxis();
            distanceAxis.title = "";
            distanceAxis.gridAlpha = 0;
            distanceAxis.position = "";
            distanceAxis.inside = false;
            distanceAxis.unit = "";
            distanceAxis.axisAlpha = 0;
            distanceAxis.labelsEnabled = false;
            chart.addValueAxis(distanceAxis);

            // GRAPHS
            // duration graph
            var durationGraph = new AmCharts.AmGraph();
            durationGraph.title = "duration";
            durationGraph.valueField = "duration";
            durationGraph.type = "line";
            durationGraph.valueAxis = durationAxis; // indicate which axis should be used
            durationGraph.lineColor = "#CC0000";
            durationGraph.balloonText = "[[value]] View";
            durationGraph.lineThickness = 1;
            durationGraph.legendValueText = "[[value]]";
            durationGraph.bullet = "square";
            durationGraph.bulletBorderColor = "#CC0000";
            durationGraph.bulletBorderAlpha = 1;
            durationGraph.bulletBorderThickness = 1;
            chart.addGraph(durationGraph);

            // distance graph
            var distanceGraph = new AmCharts.AmGraph();
            distanceGraph.valueField = "distance";
            distanceGraph.title = "distance";
            distanceGraph.type = "column";
            distanceGraph.fillAlphas = 0.1;
            distanceGraph.valueAxis = distanceAxis; // indicate which axis should be used
            distanceGraph.balloonText = "[[value]] IP";
            distanceGraph.legendValueText = "[[value]] mi";
            distanceGraph.legendPeriodValueText = "total: [[value.sum]] mi";
            distanceGraph.lineColor = "#000000";
            distanceGraph.lineAlpha = 0;
            chart.addGraph(distanceGraph);

            // CURSOR                
            var chartCursor = new AmCharts.ChartCursor();
            chartCursor.zoomable = false;
            chartCursor.categoryBalloonDateFormat = "DD";
            chartCursor.cursorAlpha = 0;
            chart.addChartCursor(chartCursor);


            // WRITE                                
            chart.write("chartdiv");
        });
});

如何在chartdiv中加载新图表？

点击后，我的chartdiv为空，无法正常工作

请帮忙修理

Answer 1

删除AmCharts.ready函数。它应该解决它。

使用jquery On Click后，AmCharts无法正常工作

1 个答案: