javascript - 将数据传递到附加的谷歌图表脚本中

Question

如何将数组传递到 google 方法 arrayToDataTable() 中？我知道这里的代码不起作用。我不知道如何将数据传递到附加脚本中。有人有什么想法吗？这是用户脚本的一部分，我制作它的网站不使用 JQuery，所以我无法使用它，而且我也不知道 JQuery，因为我是 Javascript 的初学者。

    function insertgraph(array) {
    //div element
var chart = document.createElement("div")
chart.id = "chart_div"
chart.style = "width: 900px; height: 500px";
document.body.appendChild(chart)

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.google.com/jsapi?callback=loadchart"
document.head.appendChild(script)
alert("this is the array" + array)
var scriptload = document.createElement("script")
scriptload.type = "text/javascript";
scriptload.textContent =  " function loadchart()    

    {google.load(\"visualization\", \"1\", {packages:[\"corechart\"],\"callback\" : drawChart})};alert(\"alert\");google.setOnLoadCallback(drawChart);function drawChart(array) {var data = google.visualization.arrayToDataTable(array);var options = {title: 'Company Performance'};var chart = new google.visualization.LineChart(document.getElementById('chart_div'));chart.draw(data, options);}"
    document.head.appendChild(scriptload)

}

如果您手动输入数据，效果很好

Answer 1

让我们把这个问题分解成几个较小的部分。首先，您有要附加的脚本(稍微清理一下以使其更易于阅读并删除无关的代码):

function loadchart() {
    google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
}
function drawChart(array) {
    var data = google.visualization.arrayToDataTable(array);
    var options = {title: 'Company Performance'};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

您有一个名为 array 的数据数组(顺便说一句，这对于变量来说不是一个好名字)，并且您希望将其传递给图表绘制函数。这里的问题是 google.load 调用的回调本身无法将数据传递给 drawChart 函数。附加到页面的所有脚本都将其内容转储到全局范围中，因此您无法将局部变量传递给 drawChart 函数。理想情况下，您可以执行以下操作:

scriptload.textContent = "...";
google.setOnLoadCallback(function () {
    drawChart(myData);
});
document.head.appendChild(scriptload);

但是由于在文档“load”事件触发后调用 google.load 时，其工作方式有一个怪癖，“google.setOnLoadCallback”不起作用 - 设置回调的唯一方法是与 google 一致.load 调用。这留下了两个可行的解决方案(考虑到原始问题的限制)。第一个是在全局范围内声明数据变量，并在 drawChart 函数中引用它:

// "myData" is a global variable
function loadchart() {
    google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
}
function drawChart() {
    var data = google.visualization.arrayToDataTable(myData);
    var options = {title: 'Company Performance'};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

第二种方法是在调用时将回调函数动态传递给 loadChart 函数:

function loadchart(myCallback) {
    google.load('visualization', '1', {packages:['corechart'], callback: myCallback});
}
function drawChart(myData) {
    var data = google.visualization.arrayToDataTable(myData);
    var options = {title: 'Company Performance'};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

回调必须使用适当的数据作为参数来调用drawChart:

loadChart(function () {
    drawChart(myData);
});