就我的一生而言，我无法让它发挥作用。我看到过类似的帖子，但它并没有真正解释解决方案是什么。我正在使用名为AccessDB.js的文件从Access数据库中获取数据，您可以在网上找到该文件。根据我与HighCharts的一些人的对话，我需要将SQL查询结果中的数据解析为特定的格式，所以我修改了AccessDB.js脚本，以生成与您放入HighCharts代码中显示数据基本相同的数据(形式为[[x1，y1]，[x2，y2]，[x3，y3]，[etc]]修改后的代码在我的html 之后找到
为了使其全部工作，它需要在IE中运行，才能传递允许打开数据库文件的权限。我同意。我需要其他人看看这是否有效。我将查询结果打印在屏幕上，并显示图表，但其中没有数据。按顺序获取所有文件并在IE中运行。确保安全选项设置正确，否则数据库将无法正确加载。我基本上把所有的安全级别都设置为零，以确保我没有错过任何东西。我把数据传过去了，所以这不是问题所在。我能看到的唯一问题是图表是空的。有什么想法吗？
数据库文件可在此处找到：http://briantitone.com/files/Database.mdb
这是我的代码：
<!DOCTYPE HTML>
<style>
body {
font-family:verdana;
padding:50px 150px;
}
h1 {
font-weight:500;
text-align:center;
}
table.myTable td, table.myTable th {
border-right:1px solid #000;
border-bottom:1px solid #000;
padding:3px;
}
table.myTable tr:first-child td, table.myTable tr:first-child th {
border-top:1px solid #000;
}
table.myTable tr td:first-child, table.myTable tr th:first-child {
border-left:1px solid #000;
}
#res {
border:1px solid darkgray;
padding:12px;
min-height:150px;
max-height:300px;
overflow:auto;
}
</style>
<head>
<script type="text/javascript" src="accessdb1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
var myDB = new ACCESSdb("DB.mdb", {showErrors:true});
$(document).ready(function()
{
$("#run").click(function()
{
var jval = myDB.query($('#query').val(),
{HCScat : true}); //gets json format data
$("#res").html(jval); //prints the html table to "res
$('#container').highcharts({
chart: {
type: 'scatter'
},
series: [{
data: jval
}]
});
}); //end of click function
}); //end of ready function
</script>
</head>
<div id="container" style="min-width: 600px; height: 400px; margin: 0 auto"></div>
<textarea id="query" style="width:365px;height:100px">
Select S_pct, Ca_pct from originaldata where s_pct between 5 and 8
</textarea>
<input type="button" id="run" value="Run Query" />
<div id="result">
<table id="res"></table>
</div>
</body>
</html>
访问数据库的Javascript代码(保存为正确的js文件，与其余代码一起运行)：
/*
* ACCESSdb JavaScript Library v0.9.2
*
* Joshua Faulkenberry
* Dual licensed under the MIT and GPL licenses.
*
* Date: 2009-03-14
* Revision: 4
* Modified for HighChart format data export on 2/19/14 by Brian Titone
*/
(function() {
//Helper function to handle Date formatting
window.Date.prototype.format = function(format) {
if (format == "@") { return this.getTime(); }
var MONTH_NAMES = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var DAY_NAMES = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var LZ = function(x) { return (x < 0 || x > 9 ? "" : "0") + x}
var date = this;
format = format + "";
var result = "";
var i_format = 0;
var c = "";
var token = "";
var y = date.getYear() + "";
var M = date.getMonth() + 1;
var d = date.getDate();
var E = date.getDay();
var H = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var yyyy, yy, MMM, MM, dd, hh, h, mm, ss, ampm, HH, H, KK, K, kk, k;
// Convert real date parts into formatted versions
var value = new Object();
if (y.length < 4) {
y = "" + (y - 0 + 1900);
}
value["y"] = "" + y;
value["yyyy"] = y;
value["yy"] = y.substring(2, 4);
value["M"] = M;
value["MM"] = LZ(M);
value["MMM"] = MONTH_NAMES[M - 1];
value["NNN"] = MONTH_NAMES[M + 11];
value["d"] = d;
value["dd"] = LZ(d);
value["E"] = DAY_NAMES[E + 7];
value["EE"] = DAY_NAMES[E];
value["H"] = H;
value["HH"] = LZ(H);
if (H == 0) {
value["h"] = 12;
}
else if (H > 12) {
value["h"] = H - 12;
}
else {
value["h"] = H;
}
value["hh"] = LZ(value["h"]);
if (H > 11) {
value["K"] = H - 12;
}
else {
value["K"] = H;
}
value["k"] = H + 1;
value["KK"] = LZ(value["K"]);
value["kk"] = LZ(value["k"]);
if (H > 11) {
value["a"] = "PM";
}
else {
value["a"] = "AM";
}
value["m"] = m;
value["mm"] = LZ(m);
value["s"] = s;
value["ss"] = LZ(s);
while (i_format < format.length) {
c = format.charAt(i_format);
token = "";
while ((format.charAt(i_format) == c) && (i_format < format.length)) {
token += format.charAt(i_format++);
}
if (value[token] != null) {
result = result + value[token];
}
else {
result = result + token;
}
}
return result;
}
ACCESSdb = function(dataSrc, options) {
this.options = options || {};
this.options.showErrors = this.options.showErrors || false;
this.options.adOpenDynamic = this.options.adOpenDynamic || 2;
this.options.adLockOptimistic = this.options.adLockOptimistic || 3;
this.options.persist = this.options.persist || false;
this.options.user = this.options.user || "";
this.options.password = this.options.password || "";
this.options.wrkgrpFile = "Jet OLEDB:System Database="+this.options.wrkgrpFile+";" || "";
this.dataSource = dataSrc;
this.provider = "Microsoft.Jet.OLEDB.4.0";
this.conn = new ActiveXObject("ADODB.Connection");
this.query = function(query, options) {
if (!options) {
options = {};
}
var result = true;
var rs = new ActiveXObject("ADODB.Recordset");
try {
rs.open(query, this.conn, this.options.adOpenDynamic, this.options.adLockOptimistic);
}
catch (e) {
if (this.options.showErrors) {
alert("Query " + e.name + "nn" + e.description);
}
if (options.errorHandler) {
options.errorHandler(e);
}
result = false;
}
if (rs.Fields.Count) {
if (!rs.bof && !rs.eof) {
if (options.json) {
result = this.outJSON(rs);
}
else if (options.HCScat) {
result = this.outHC(rs);
}
else if (options.xml) {
result = this.outXML(rs, options.xml);
}
else if (options.table) {
result = this.outTable(rs, options.table);
}
else {
result = eval("(" + this.outJSON(rs) + ")");
}
}
else {
result = false;
}
rs.close();
}
else {
result = false;
}
return result;
};
this.insert = function(table, data, options) {
if (!options) {
options = {};
}
var insList = [];
var insStr = "INSERT INTO " + table + " (";
data = this.translate(data);
if (!data) { return false; }
for (var key in data[0]) {
if (key != "ID") {
insStr += "" + key + ",";
}
}
insStr = insStr.slice(0, insStr.length - 1) + ") VALUES(%%%)n";
for (var x = 0, row; row = data[x]; x++) {
var rowIns = "";
for (var key in row) {
if (key != "ID") {
var val = row[key];
if (typeof(val) == "number" || typeof(val) == "boolean") {
rowIns += val + ",";
}
else {
val = val.replace(/"/g, '"');
val = val.replace(/'/g, ''');
rowIns += """ + val + "",";
}
}
}
insList[insList.length] = insStr.replace("%%%", rowIns.slice(0, rowIns.length - 1));
}
var noerr = true;
for (var x = 0, sql; sql = insList[x]; x++) {
if (!this.query(sql, options)) {
noerr = false;
break;
}
}
return noerr;
};
this.translate = function(data) {
var tranObj;
if (typeof(data) == "string") {
if (data.replace(/^s*(.*?)s*$/, "$1").charAt(0) == "<" && data.replace(/^s*(.*?)s*$/, "$1").charAt(data.replace(/^s*(.*?)s*$/, "$1").length - 1) == ">") {
//Should be XML String
var err = false;
try {
varxmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(data);
}
catch (e) {
tranObj = false;
err = true;
if (this.options.showErrors) {
alert("XML " + e.name + "nn" + e.description);
}
}
if (!err) tranObj = this.convertXML(xmlDoc);
}
else if (data.replace(/^s*(.*?)s*$/, "$1").charAt(0) == "[" && data.replace(/^s*(.*?)s*$/, "$1").charAt(data.replace(/^s*(.*?)s*$/, "$1").length - 1) == "]") {
//Should be JSON String
try {
tranObj = eval("(" + data + ")");
}
catch (e) {
tranObj = false;
if (this.options.showErrors) {
alert("JSON " + e.name + "nn" + e.description);
}
}
}
}
else if (typeof(data) == "object") {
if (data.nodeName) {
//Should be XML Object
tranObj = this.convertXML(data);
}
else if (data[0]) {
//Should be JSON Object
tranObj = data;
}
}
return tranObj;
};
this.convertXML = function(xmlDoc) {
var jsObj = [];
for (var x = 0, row; row = xmlDoc.getElementsByTagName("record")[x]; x++) {
jsObj[x] = {};
for (var y = 0, col; col = row.childNodes[y]; y++) {
jsObj[x][col.nodeName] = col.text;
}
}
return jsObj;
};
this.outJSON = function(rs) {
var json = "[";
rs.MoveFirst();
while (!rs.eof) {
json += '{';
for (var x = 0; x < rs.Fields.Count; x++) {
json += '"' + rs.Fields(x).Name + '":';
var val = rs.Fields(x).Value;
if (typeof(val) == "string") {
val = val.replace(/"/g, '"');
val = val.replace(/'/g, ''');
val = '"' + val + '"';
}
if (typeof(val) == "date") {
val = "new Date("" + val + "")";
}
json += val + ',';
}
json = json.slice(0, json.length - 1);
rs.MoveNext();
json += '},';
}
json = json.slice(0, json.length - 1);
json += ']';
return json;
};
this.outHC = function(rs) { //This is a function I made to produce values for Highcharts
var HCScat = "[";
rs.MoveFirst();
while (!rs.eof) {
HCScat += '[';
for (var x = 0; x < rs.Fields.Count; x++) {
//HC += '"' + rs.Fields(x).Name + '":';
var val = rs.Fields(x).Value;
if (typeof(val) == "string") {
val = val.replace(/"/g, '"');
val = val.replace(/'/g, ''');
val = '"' + val + '"';
}
if (typeof(val) == "date") {
val = "new Date("" + val + "")";
}
HCScat += val + ',';
}
HCScat = HCScat.slice(0, HCScat.length - 1);
rs.MoveNext();
HCScat += '],';
}
HCScat = HCScat.slice(0, HCScat.length - 1);
HCScat += ']';
return HCScat;
};
this.outXML = function(rs, options) {
var xml = "<?xml version="1.0" encoding="utf-8"?><recordset>";
rs.MoveFirst();
while (!rs.eof) {
xml += '<record>';
for (var x = 0; x < rs.Fields.Count; x++) {
var val = rs.Fields(x).Value;
if (typeof(val) == "string") {
val = val.replace(/&/g, '&');
val = val.replace(/</g, '<');
val = val.replace(/>/g, '>');
}
else if (typeof(val) == "date" && options.formatDates) {
if (typeof(options.formatDates) == "string") {
val = (new Date((val))).format(options.formatDates);
}
else {
for (var col in options.formatDates) {
if (col == rs.Fields(x).Name) {
val = (new Date((val))).format(options.formatDates[col]);
}
}
}
}
xml += "<" + rs.Fields(x).Name + ">" + val + "</" + rs.Fields(x).Name + ">";
}
xml += '</record>';
rs.MoveNext();
}
xml += '</recordset>';
if (!options.stringOut) {
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(xml);
xml = xmlDoc;
}
return xml;
};
this.outTable = function(rs, options) {
var tbl = document.createElement("table");
tbl.cellPadding = 0;
tbl.cellSpacing = 0;
var tbody = document.createElement("tbody");
tbl.appendChild(tbody);
if (options.id) {
tbl.id = options.id;
}
if (options.className) {
tbl.className = options.className;
}
rs.MoveFirst();
if (!options.noHeaders) {
var row = document.createElement("tr");
tbody.appendChild(row);
for (var x = 0; x < rs.Fields.Count; x++) {
var hdr = document.createElement("th");
hdr.innerHTML = rs.Fields(x).Name;
row.appendChild(hdr);
}
}
while (!rs.eof) {
var row = document.createElement("tr");
tbody.appendChild(row);
for (var x = 0; x < rs.Fields.Count; x++) {
var val = rs.Fields(x).Value;
if (typeof(val) == "string") {
val = val.replace(/&/g, '&');
val = val.replace(/</g, '<');
val = val.replace(/>/g, '>');
}
else if (typeof(val) == "date" && options.formatDates) {
if (typeof(options.formatDates) == "string") {
val = (new Date((val))).format(options.formatDates);
}
else {
for (var col in options.formatDates) {
if (col == rs.Fields(x).Name) {
val = (new Date((val))).format(options.formatDates[col]);
}
}
}
}
var cell = document.createElement("td");
cell.innerHTML = val;
row.appendChild(cell);
}
rs.MoveNext();
}
if (options.stringOut) { return tbl.outerHTML; }
return tbl;
};
this.kill = function() {
this.conn.close();
delete this;
};
try {
this.conn.open("Provider = " + this.provider + ";Data Source = " + this.dataSource + ";"+this.options.wrkgrpFile+"Persist Security Info = " + this.options.persist, this.options.user, this.options.password);
}
catch (e) {
if (this.options.showErrors) {
alert("Load DB " + e.name + "nn" + e.description);
}
}
};
})();
通过查看其他几篇文章，我发现了需要对数据进行哪些处理才能传递数据。。。
我把上面的一小部分代码改成了这个：
var Plot = eval(jval);
$('#container').highcharts({
chart: {
type: 'scatter'
},
series: [{
data: Plot
}]
});
无论出于何种原因，在我对包含json数据的变量执行eval()之前，它都没有通过。有人能解释一下函数的eval是干什么的吗？它确实有效，但我不知道为什么。