Java 使用jquery单击后AmCharts不起作用
我用图表 默认JAVA代码为：Java 使用jquery单击后AmCharts不起作用,java,php,jquery,Java,Php,Jquery,我用图表 默认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
<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>
<div id="chartdiv" style="width:100%; height:300px;"></div>
var图表数据=[
];
var图；
AmCharts.ready（函数（）{
//序列图
chart=新的AmCharts.AmSerialChart（）；
chart.dataProvider=chartData；
chart.categoryField=“日期”；
chart.dataDateFormat=“DD”；
chart.marginTop=10；
//斧头
//类别轴
var categoryAxis=chart.categoryAxis；
categoryAxis.parseDates=false；//由于我们的数据是基于日期的，所以我们将parseDates设置为true
categoryAxis.minPeriod=“DD”//我们的数据是每日的，所以我们将minPeriod设置为DD
categoryAxis.autoGridCount=false；
categoryAxis.gridCount=50；
categoryAxis.gridAlpha=0.05；
categoryAxis.gridColor=“#000000”；
categoryAxis.axisColor=“#555555”；
//由于我们有不同单位的数据，我们创建了两个不同的值轴
//持续时间值轴
var durationAxis=新的AmCharts.ValueAxis（）；
durationAxis.title=“”；
durationAxis.gridAlpha=0.05；
durationAxis.axisAlpha=0；
durationAxis.inside=0；
//下一行使该值轴将值转换为持续时间
//它告诉轴它应该使用的持续时间单位。mm-分钟，hh-小时。。。
图表.addValueAxis（durationAxis）；
//距离值轴
var distanceAxis=新的AmCharts.ValueAxis（）；
distanceAxis.title=“”；
distanceAxis.gridAlpha=0；
distanceAxis.position=“”；
distanceAxis.inside=false；
distanceAxis.unit=“”；
distanceAxis.axisAlpha=0；
distanceAxis.labelsEnabled=false；
图表.addValueAxis（距离轴）；
//图表
//持续时间图
var durationGraph=new AmCharts.AmGraph（）；
durationGraph.title=“持续时间”；
durationGraph.valueField=“duration”；
durationGraph.type=“line”；
durationGraph.valueAxis=durationAxis；//指示应使用哪个轴
durationGraph.lineColor=“#CC0000”；
durationGraph.BallooText=“[[value]]视图”；
durationGraph.lineThickness=1；
durationGraph.legendValueText=“[[value]]”；
durationGraph.bullet=“square”；
durationGraph.bulletBorderColor=“#CC0000”；
durationGraph.bulletBorderAlpha=1；
durationGraph.bulletBorderThickness=1；
图表.添加图（持续图）；
//距离图
var distanceGraph=new AmCharts.AmGraph（）；
distanceGraph.valueField=“距离”；
distanceGraph.title=“距离”；
distanceGraph.type=“column”；
距离图.fillAlphas=0.1；
distanceGraph.valueAxis=distanceAxis；//指示应使用哪个轴
distanceGraph.BallooText=“[[value]]IP”；
distanceGraph.legendValueText=“[[value]]mi”；
distanceGraph.legendPeriodValueText=“总计：[[value.sum]]mi”；
distanceGraph.lineColor=“#000000”；
distanceGraph.lineAlpha=0；
图表。添加图（距离图）；
//光标
var chartCursor=new AmCharts.chartCursor（）；
chartCursor.zoomable=false；
chartCursor.categoryBalloonDateFormat=“DD”；
chartCursor.cursorAlpha=0；
chart.addChartCursor（chartCursor）；
//写
chart.write（“chartdiv”）；
});
<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>
<div id="chartdiv" style="width:100%; height:300px;"></div>
$(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");
});
});
$（文档）。在（'单击'，'上。列出一个'，函数（）{
var图表数据=[
];
var图；
AmCharts.ready（函数（）{
//序列图
chart=新的AmCharts.AmSerialChart（）；
chart.dataProvider=chartData；
chart.categoryField=“日期”；
chart.dataDateFormat=“DD”；
chart.marginTop=10；
//斧头
//类别轴
var categoryAxis=chart.categoryAxis；
categoryAxis.parseDates=false；//由于我们的数据是基于日期的，所以我们将parseDates设置为true
categoryAxis.minPeriod=“DD”//我们的数据是每日的，所以我们将minPeriod设置为DD
categoryAxis.autoGridCount=false；
categoryAxis.gridCount=50；
categoryAxis.gridAlpha=0.05；
categoryAxis.gridColor=“#000000”；
categoryAxis.axisColor=“#555555”；
//由于我们有不同单位的数据，我们创建了两个不同的值轴
//持续时间值轴
var durationAxis=新的AmCharts.ValueAxis（）；
durationAxis.title=“”；
durationAxis.gridAlpha=0.05；
durationAxis.axisAlpha=0；
durationAxis.inside=0；
//下一行使该值轴将值转换为持续时间
//它告诉轴它应该使用的持续时间单位。mm-分钟，hh-小时。。。
图表.addValueAxis（durationAxis）；
//距离值轴
var distanceAxis=新的AmCharts.ValueAxis（）；
distanceAxis.title=“”；
distanceAxis.gridAlpha=0；
distanceAxis.position=“”；
distanceAxis.inside=false；
distanceAxis.unit=“”；
distanceAxis.axisAlpha=0；
distanceAxis.labelsEnabled=false；
图表.addValueAxis（距离轴）；
//图表
//持续时间图
var durationGraph=new AmCharts.AmGraph（）；
durationGraph.title=“持续时间”；
durationGraph.valueField=“duration”；
durationGraph.type=“line”；
durationGraph.valueAxis=durationAxis；//指示哪个轴应为u