Javascript 当数据存储在CSV文件中时，如何生成动态图表？如何显示为该值提供额外信息的弹出窗口？

我有许多组，每个组都有

n

多个属性。每个属性在每个日期都有不同的值。我已经为所选组生成了一个图形，x轴上有

日期

，y轴上有

值

。选定组的值存储在附加的CSV文件中。我必须为这个CSV文件生成amCharts

额外信息：价值相关情况、历史等

var图；
var chartData=[]；
var-chartCursor；
AmCharts.ready（函数（）{
//序列图
chart=新的AmCharts.AmSerialChart（）；
chart.pathToImages=“amcharts/images/”；
chart.dataProvider=chartData；
chart.categoryField=“日期”；
chart.dataDateFormat=“YYYY-MM-DD”；
//侦听“dataUpdated”事件（在呈现图表时激发），并在事件发生时调用zoomChart方法
chart.addListener（“数据更新”，zoomChart）；
//斧头
//类别
var categoryAxis=chart.categoryAxis；
categoryAxis.parseDates=true；//由于我们的数据是基于日期的，所以我们将parseDates设置为true
categoryAxis.minPeriod=“DD”//我们的数据是每日的，所以我们将minPeriod设置为DD
categoryAxis.dashLength=2；
categoryAxis.gridAlpha=0.15；
categoryAxis.minorGridEnabled=true；
categoryAxis.axisColor=“#DADADA”；
//价值观
var valueAxis=新的AmCharts.valueAxis（）；
//valueAxis.position=“right”；
valueAxis.axisAlpha=0.2；
valueAxis.dashLength=1；
showLastLabel=true；
valueAxis.title=“云服务”；
图表.添加valueAxis（valueAxis）；
//标签
//var allLabels=new AmCharts.allLabels（）；
//allLabels.text=“lable-1”；
//allLabels.bold=true；
//allLabels.y=“aws”；
//图表.添加所有标签（所有标签）；
//图表
//var图=[]；
//var访问；
//对于（var j=1；j<4；j++）
//{   
graph=新的AmCharts.AmGraph（）；
graph.title=“红线”；
//访问次数=
graph.valueField=“访问”；
graph.bullet=“圆形”；
graph.bulletBorderColor=“#FFFFFF”；
图1：厚度=2；
图1.1α=1；
图1.lineThickness=2；
graph.lineColor=“#b5030d”；
graph.negativeLineColor=“#0352b5”；
graph.ballootText=“[[category]]
值：[[value]]”；
graph.hidebulletscont=50；//这使得图表在选择的序列超过50个时隐藏项目符号
图表。添加图表（图形）；
//}
//图1
var graph1=新的AmCharts.AmGraph（）；
graph1.title=“红线”；
graph1.valueField=“visits1”；
图1.bullet=“圆形”；
graph1.bulletBorderColor=“#FFFFFF”；
图1.2厚度=2；
图1.1α=1；
图1.lineThickness=2；
graph1.lineColor=“#b5030d”；
图1.negativeLineColor=“#0352b5”；
graph1.BallooText=“[[category]]
值：[[value1]]”；
graph1.hidebulletscont=50；//这使得图表在选择的序列超过50个时隐藏项目符号
图.添加图（图1）；
//图2
var graph2=新的AmCharts.AmGraph（）；
图2.title=“红线”；
graph2.valueField=“visits2”；
图2.bullet=“圆形”；
graph2.bulletBorderColor=“#FFFFFF”；
图2.2厚度=2；
图2.2α=1；
图2.lineThickness=2；
graph2.lineColor=“#b5030d”；
图2.negativeLineColor=“#0352b5”；
graph2.BallooText=“[[category]]
值：[[value2]]”；
graph2.hidebulletscont=50；//这使得图表在选择的序列超过50个时隐藏项目符号
图.添加图（图2）；
//图3
var graph3=新的AmCharts.AmGraph（）；
图3.title=“红线”；
graph3.valueField=“visits3”；
图3.bullet=“圆形”；
图3.bulletBorderColor=“#FFFFFF”；
图3.1厚度=2；
图3.1α=1；
图3.lineThickness=2；
图3.lineColor=“#b5030d”；
图3.negativeLineColor=“#0352b5”；
graph3.BallooText=“[[category]]
值：[[value3]]”；
graph3.hidebulletscont=50；//这使得图表在选择的序列超过50个时隐藏项目符号
图.添加图（图3）；
//图4
var graph4=新的AmCharts.AmGraph（）；
图4.title=“红线”；
graph4.valueField=“visits4”；
图4.bullet=“圆形”；
graph4.bulletBorderColor=“#FFFFFF”；
图4.2厚度=2；
图4.1α=1；
图4.lineThickness=2；
图4.lineColor=“#b5030d”；
图4.negativeLineColor=“#0352b5”；
graph4.BallooText=“[[category]]
值：[[value4]]”；
graph4.hidebulletscont=50；//这使得图表在选择的序列超过50个时隐藏项目符号
图.添加图（图4）；
//光标
chartCursor=新建AmCharts.chartCursor（）；
chartCursor.cursorPosition=“鼠标”；
chart.addChartCursor（chartCursor）；
//滚动条
var chartScrollbar=新的AmCharts.chartScrollbar（）；
chartScrollbar.graph=图形；
chartScrollbar.scrollbarHeight=50；
chartScrollbar.color=“#FFFFFF”；
chartScrollbar.autogidcount=true；
chart.addChartScrollbar（chartScrollbar）；
//写
chart.write（“chartdiv”）；
loadCSV（“Na.csv”）；
});
函数loadCSV（文件）{
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari
var request=new XMLHttpRequest（）；
}否则{
//IE6、IE5的代码
var request=newactivexobject（'Microsoft.XMLHTTP'）；
}
//装载
打开（'GET'，file，false）；
request.send（）；
parseCSV（request.responseText）；
}
函数parseCSV（数据）{
//更换UNIX新线路
数据=数据。替换（/\r\n/g，“\n”）；
//更换新线路
数据=数据。替换（/\r/g，“\n”）；
//分成几行
var rows=data.split（“\n”）；
/*函数parseCSV（数据）{
//更换UNIX新线路
2015-05-13,4,9,14,19,24,29,34,39,44,49,54,59,64,69,74,79,84,89,94,99,104,109,114,119,124,129,134,139,144,149,154,159,164,169,174,179,184,189,194,199,204,209,214,219,224,229,234,239,244,249,254,259,264,269,274,279,284,289,294,299,304,309,314,319,324,329,334,339,344,349,354,359,364,369,374,379,384,389,394,399,404,409,414,419,424,429,434,439,444,449,454,459,464,469,474,479,484,489,494,499,504,509,514,519,524,529,534,539
2015-05-16,3,9,14,19,24,29,34,39,44,49,54,59,64,69,74,79,84,89,94,99,104,109,114,119,124,129,134,139,144,149,154,159,164,169,174,179,184,189,194,199,204,209,214,219,224,229,234,239,244,249,254,259,264,269,274,279,284,289,294,299,304,309,314,319,324,329,334,339,344,349,354,359,364,369,374,379,384,389,394,399,404,409,414,419,424,429,434,439,444,449,454,459,464,469,474,479,484,489,494,499,504,509,514,519,524,529,534,539
2015-05-18,4,9,14,19,24,29,34,39,44,49,54,59,64,69,74,79,84,89,94,99,104,109,114,119,124,129,134,139,144,149,154,159,164,169,174,179,184,189,194,199,204,209,214,219,224,229,234,239,244,249,254,259,264,269,274,279,284,289,294,299,304,309,314,319,324,329,334,339,344,349,354,359,364,369,374,379,384,389,394,399,404,409,414,419,424,429,434,439,444,449,454,459,464,469,474,479,484,489,494,499,504,509,514,519,524,529,534,539
2015-05-19,4,9,14,19,24,29,34,39,44,49,54,59,64,69,74,75,84,89,94,99,104,109,114,119,124,129,134,139,144,149,154,159,164,169,174,179,184,189,194,199,204,209,214,219,224,229,234,239,244,249,254,259,260,269,274,279,284,289,294,299,304,309,314,319,324,329,334,339,344,349,354,359,364,369,374,379,384,389,394,399,404,409,414,419,424,429,434,439,444,449,454,459,464,469,474,479,484,489,494,499,504,509,514,519,524,529,534,539
2015-05-26,4,9,14,19,24,29,34,39,44,49,54,59,64,69,74,75,84,89,94,99,104,109,114,119,124,129,134,139,144,149,154,159,164,169,174,179,184,189,194,199,204,209,214,219,224,229,234,239,244,249,254,259,260,269,274,279,284,289,294,299,304,309,314,319,324,329,334,339,344,349,354,359,364,369,374,379,384,389,394,399,404,409,414,419,424,429,434,439,444,449,454,459,464,469,474,479,484,489,494,499,504,509,514,519,524,529,534,539