这里我使用 amcharts API 来绘制饼图，它工作正常，但根据我的数据有超过 2000 个标准（饼图中超过 2000 个分区）.. 显示很多分区是无关紧要的.. 所以在这里我想要仅显示前 10 个分区
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts: Javascript only strategy</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/amstock.js" type="text/javascript"></script>
<script type="text/javascript">
AmCharts.ready(function() {
loadJavascriptChartA("chartdivA", "language.txt");
});
// this method creates a javascript chart ploting data from external file
function loadJavascriptChartA(elementId, file) {
var chart = new AmCharts.AmPieChart();
// first we load the external data file
var data = loadFile(file);
// then we set a data provider to the chart
chart.dataProvider = createDataProvider(data);
legend = new AmCharts.AmLegend();
legend.align = "center";
legend.markerType = "circle";
chart.addTitle("Language Code/Tweets", 16);
chart.addLegend(legend);
chart.titleField = "language";
chart.valueField = "tweets";
chart.innerRadius = 10;
chart.labelRadius = 1;
chart.sequencedAnimation = true;
chart.labelText = "[[title]]: [[value]]";
chart.write(elementId);
// method which parses csv data
function createDataProvider(data){
var rows = data.split("\n");
// create array which will hold our data:
dataProvider = [];
var start = "Tue 19 Jun 2012 01:00:00 GMT+0530 (India Standard Time)";
var end = "Fri 19 Jun 2012 01:00:00 GMT+0530 (India Standard Time)";
start = start.split(" ");
end = end.split(" ");
var starttime = start[1].concat(" ",start[2]," ",start[3]);
var endtime = end[1].concat(" ",end[2]," ",end[3]);
var bool = false;
var startline = 0;
var endline = 0;
var counter = 0;
// loop through all rows
for (var i = 1; i < rows.length; i++){
if (rows[i]) {
// our columns are separated by a semicolon
var column = rows[i].split(",");
// column is array now
var date = column[0];
date = date.split(" ");
var day = date[0].concat(" ",date[1]," ",date[2]);
}
if(starttime.match(day) && bool!=true)
{
bool = true;
startline = i+1;
}
if(endtime.match(day)){
endline = i+1;
}
}
for (var j = startline-1; j < endline; j++){
// this line helps to skip empty rows
// our columns are separated by a semicolon
var column = rows[j].split(",");
// column is array now
var date = column[0];
date = date.split(" ");
var day = date[0].concat(" ",date[1]," ",date[2]);
var language = column[1];
var tweets = parseInt(column[2]);
// check if category already exists
var catExists = false;
for (var x = 0; x < dataProvider.length; x++) {
if (dataProvider[x].language == language) {
catExists = true;
dataProvider[x].tweets += tweets;
}
}
function sortDescending(data_A, data_B)
{
return (data_B.tweets - data_A.tweets);
}
var temp = dataProvider.sort(sortDescending);
if (!catExists) {
// create object which contains all these items:
var dataObject = {"language":language, "tweets":tweets};
if(counter < 5){
// add object to dataProvider array
temp.push(dataObject);
counter++;
}
}
}
return dataProvider;
}
}
// method which loads external data
function loadFile(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();
// now lets load data into a new flash chart
var data = request.responseText;
//replace UNIX new line
data = data.replace (/\r\n/g, "\n");
//replace MAC new lines
data = data.replace (/\r/g, "\n");
return data;
}
</script>
</head>
</body>
<!--script type="text/javascript">
alert(document.getElementsByName('startDateField3.value'))
</script-->