js读取CSV格式数据,参考如下:
<script type="text/javascript">// This will parse a delimited string into an array of
// arrays. The default delimiter is the comma, but this
// can be overriden in the second argument.
function CSVToArray( strData, strDelimiter ){
// Check to see if the delimiter is defined. If not,
// then default to comma.
strDelimiter = (strDelimiter || ",")
// Create a regular expression to parse the CSV values.
var objPattern = new RegExp(
(
// Delimiters.
"(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
// Quoted fields.
"(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
// Standard fields.
"([^\"\\" + strDelimiter + "\\r\\n]*))"
),
"gi"
)
// Create an array to hold our data. Give the array
// a default empty first row.
var arrData = [[]]
// Create an array to hold our individual pattern
// matching groups.
var arrMatches = null
// Keep looping over the regular expression matches
// until we can no longer find a match.
while (arrMatches = objPattern.exec( strData )){
// Get the delimiter that was found.
var strMatchedDelimiter = arrMatches[ 1 ]
// Check to see if the given delimiter has a length
// (is not the start of string) and if it matches
// field delimiter. If id does not, then we know
// that this delimiter is a row delimiter.
if (
strMatchedDelimiter.length &&
(strMatchedDelimiter != strDelimiter)
){
// Since we have reached a new row of data,
// add an empty row to our data array.
arrData.push( [] )
}
// Now that we have our delimiter out of the way,
// let's check to see which kind of value we
// captured (quoted or unquoted).
if (arrMatches[ 2 ]){
// We found a quoted value. When we capture
// this value, unescape any double quotes.
var strMatchedValue = arrMatches[ 2 ].replace(
new RegExp( "\"\"", "g" ),
"\""
)
} else {
// We found a non-quoted value.
var strMatchedValue = arrMatches[ 3 ]
}
// Now that we have our value string, let's add
// it to the data array.
arrData[ arrData.length - 1 ].push( strMatchedValue )
}
// Return the parsed data.
return( arrData )
}
</script>
这需要使用 JavaScript 进行读取 CSV 文件的操作。通过使用Ajax来读取CSV文件,并实时将其中的数据作为饼图的数据源,从而实现数据的实时更新。以下是根据您提供的图片3所做的示例
Ajax (Asynchronous JavaScript and XML) 是一种创建异步Web应用程序的技术。Ajax允许在不重新加载整个页面的情况下从服务器端加载数据,从而提高了用户体验和网页性能。
Ajax主要使用XMLHttpRequest对象来实现数据交互,并通过JavaScript和CSS来更新页面。Ajax请求在后台与服务器进行通信,因此它不需要阻塞用户界面,用户仍然可以继续与页面交互。
Ajax应用的一个简单的例子是:在页面中输入关键字,立即在页面下方更新搜索结果,而不是整个页面的重新加载。这就是Ajax的一种常见用例,它提高了网页的加载速度,并提高了用户的体验。
如果是基于浏览器,那就不能修改。js读取CSV格式数据,参考如下:
<script type="text/javascript">
// This will parse a delimited string into an array of
// arrays. The default delimiter is the comma, but this
// can be overriden in the second argument.
function CSVToArray( strData, strDelimiter ){
// Check to see if the delimiter is defined. If not,
// then default to comma.
strDelimiter = (strDelimiter || ",")
// Create a regular expression to parse the CSV values.
var objPattern = new RegExp(
(
// Delimiters.
"(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
// Quoted fields.
"(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
// Standard fields.
"([^\"\\" + strDelimiter + "\\r\\n]*))"
),
"gi"
)
// Create an array to hold our data. Give the array
// a default empty first row.
var arrData = [[]]
// Create an array to hold our individual pattern
// matching groups.
var arrMatches = null
// Keep looping over the regular expression matches
// until we can no longer find a match.
while (arrMatches = objPattern.exec( strData )){
// Get the delimiter that was found.
var strMatchedDelimiter = arrMatches[ 1 ]
// Check to see if the given delimiter has a length
// (is not the start of string) and if it matches
// field delimiter. If id does not, then we know
// that this delimiter is a row delimiter.
if (
strMatchedDelimiter.length &&
(strMatchedDelimiter != strDelimiter)
){
// Since we have reached a new row of data,
// add an empty row to our data array.
arrData.push( [] )
}