Question

对于我的生活，我无法让它发挥作用。我已经看到了类似的帖子，但它并没有真正解释解决方案是什么。我正在使用您可以在线找到的名为AccessDB.js的文件从Access数据库中获取数据。基于我在HighCharts上与某人的一些对话，我需要将我的SQL查询结果中的数据解析为特定格式，因此我修改了AccessDB.js脚本，以生成与放入HighCharts代码中的数据基本相同的数据。显示数据（表单为[[x1，y1]，[x2，y2]，[x3，y3]，[etc]]修改后的代码在我的html之后找到。

为了使其全部工作，需要在IE中运行以传递允许数据库文件打开的权限。我很好。我需要别人看看这是否有效。我得到了查询的结果在屏幕上打印出来，我得到了图表，但是里面没有数据。按顺序获取所有文件并在IE中运行它。确保安全选项设置正确或DB无法正确加载。我基本上将所有安全级别设置为零，以确保我没有错过任何东西。我得到数据，这不是问题。我能看到的唯一问题是图表是空的。任何想法有什么不对？

可在此处找到数据库文件：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 + "\n\n" + 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, '&#34;');
                 val = val.replace(/\'/g, '&#39;');
                 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 + "\n\n" + 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 + "\n\n" + 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, '&#34;');
              val = val.replace(/\'/g, '&#39;');
              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, '&#34;');
              val = val.replace(/\'/g, '&#39;');
              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, '&#38;');
              val = val.replace(/\</g, '&#60;');
              val = val.replace(/\>/g, '&#62;');
           }
           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, '&#38;');
              val = val.replace(/\</g, '&#60;');
              val = val.replace(/\>/g, '&#62;');
           }
           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 + "\n\n" + e.description);
     }
  }
};

})();

Answer 1

查看其他一些帖子，我想出了需要对数据做些什么来传递它...

我将上面代码的一小部分更改为：

var Plot = eval(jval);

    $('#container').highcharts({
    chart: {
        type: 'scatter'
    },
    series: [{
         data: Plot  
    }]
    });

无论出于何种原因，包含我的json数据的变量都没有通过，直到我对它执行eval（）。任何人都可以解释函数的eval是什么吗？它确实有效，但我不确定为什么。

Javascript：使用HighCharts从变量绘制数据 - 无数据传递

1 个答案: