问题
I have a number of groups, each group has n number of properties. Each property has different values on each date. I have generated a graph for a selected group with date on x-axis and values on y-axis. The value of the selected group is stored in attached CSV file. I have to enerate amCharts for this CSV file.
Extra Information: value related situation, history etc.
var chart;
var chartData = [];
var chartCursor;
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "amcharts/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
chart.dataDateFormat = "YYYY-MM-DD";
// listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
chart.addListener("dataUpdated", zoomChart);
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // 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.dashLength = 2;
categoryAxis.gridAlpha = 0.15;
categoryAxis.minorGridEnabled = true;
categoryAxis.axisColor = "#DADADA";
// value
var valueAxis = new AmCharts.ValueAxis();
//valueAxis.position="right";
valueAxis.axisAlpha = 0.2;
valueAxis.dashLength = 1;
showLastLabel = true;
valueAxis.title = "Cloud Services";
chart.addValueAxis(valueAxis);
//label
//var allLabels = new AmCharts.allLabels();
//allLabels.text="lable-1";
//allLabels.bold=true;
//allLabels.y="aws";
//chart.addallLabels(allLabels);
// GRAPH
// var graph = [];
// var visits;
//for (var j = 1; j < 4; j++)
//{
graph = new AmCharts.AmGraph();
graph.title = "red line";
//visits=
graph.valueField = "visits";
graph.bullet = "round";
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderThickness = 2;
graph.bulletBorderAlpha = 1;
graph.lineThickness = 2;
graph.lineColor = "#b5030d";
graph.negativeLineColor = "#0352b5";
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>";
graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph);
//}
// GRAPH1
var graph1 = new AmCharts.AmGraph();
graph1.title = "red line";
graph1.valueField = "visits1";
graph1.bullet = "round";
graph1.bulletBorderColor = "#FFFFFF";
graph1.bulletBorderThickness = 2;
graph1.bulletBorderAlpha = 1;
graph1.lineThickness = 2;
graph1.lineColor = "#b5030d";
graph1.negativeLineColor = "#0352b5";
graph1.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value: [[value1]]</span></b>";
graph1.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph1);
// GRAPH2
var graph2 = new AmCharts.AmGraph();
graph2.title = "red line";
graph2.valueField = "visits2";
graph2.bullet = "round";
graph2.bulletBorderColor = "#FFFFFF";
graph2.bulletBorderThickness = 2;
graph2.bulletBorderAlpha = 1;
graph2.lineThickness = 2;
graph2.lineColor = "#b5030d";
graph2.negativeLineColor = "#0352b5";
graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value: [[value2]]</span></b>";
graph2.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph2);
// GRAPH3
var graph3 = new AmCharts.AmGraph();
graph3.title = "red line";
graph3.valueField = "visits3";
graph3.bullet = "round";
graph3.bulletBorderColor = "#FFFFFF";
graph3.bulletBorderThickness = 2;
graph3.bulletBorderAlpha = 1;
graph3.lineThickness = 2;
graph3.lineColor = "#b5030d";
graph3.negativeLineColor = "#0352b5";
graph3.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value: [[value3]]</span></b>";
graph3.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph3);
// GRAPH4
var graph4 = new AmCharts.AmGraph();
graph4.title = "red line";
graph4.valueField = "visits4";
graph4.bullet = "round";
graph4.bulletBorderColor = "#FFFFFF";
graph4.bulletBorderThickness = 2;
graph4.bulletBorderAlpha = 1;
graph4.lineThickness = 2;
graph4.lineColor = "#b5030d";
graph4.negativeLineColor = "#0352b5";
graph4.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value: [[value4]]</span></b>";
graph4.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph4);
// CURSOR
chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chartScrollbar.graph = graph;
chartScrollbar.scrollbarHeight = 50;
chartScrollbar.color = "#FFFFFF";
chartScrollbar.autoGridCount = true;
chart.addChartScrollbar(chartScrollbar);
// WRITE
chart.write("chartdiv");
loadCSV("Na.csv");
});
function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
} else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', file, false);
request.send();
parseCSV(request.responseText);
}
function parseCSV(data) {
//replace UNIX new lines
data = data.replace(/\r\n/g, "\n");
//replace MAC new lines
data = data.replace(/\r/g, "\n");
//split into rows
var rows = data.split("\n");
/* function parseCSV(data) {
//replace UNIX new lines
data = data.replace(/\r\n/g, "\n");
//replace MAC new lines
data = data.replace(/\r/g, "\n");
//split into rows
var rows = data.split("\n");
var value;*/
// loop through all rows
for (var i = 0; i < rows.length; i++) {
// this line helps to skip empty rows
if (rows[i]) {
// our columns are separated by comma
var column = rows[i].split(",");
// column is array now
// first item is date
var date = column[0];
// second item is value of the second column
// value[i] = column;
var value = column[1];
var value1 = column[2];
var value2 = column[3];
var value3 = column[4];
var value4 = column[5];
// create object which contains all these items:
var dataObject = {
date: date,
visits: value,
visits1: value1,
visits2: value2,
visits3: value3,
visits4: value4
};
// add object to chartData array
chartData.push(dataObject);
}
}
chart.validateData();
}
// this method is called when chart is first inited as we listen for "dataUpdated" event
function zoomChart() {
// different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
chart.zoomToIndexes(chartData.length - 50, chartData.length - 1);
}
// changes cursor mode from pan to select
function setPanSelect() {
if (document.getElementById("rb1").checked) {
chartCursor.pan = false;
chartCursor.zoomable = true;
} else {
chartCursor.pan = true;
}
chart.validateNow();
}
CSV file: Na.csv
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
来源：https://stackoverflow.com/questions/30776072/how-generate-dynamic-amcharts-when-data-is-stored-in-csv-file-how-show-popup-t