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的数据数组（对于变量btw来说不是一个好名字），你想将它传递给你的图表绘制函数。这里的问题是来自google.load调用的回调无法将您的数据单独传递给drawChart函数。附加到页面的所有脚本都将其内容转储到全局范围，因此您无法将局部变量传递给drawChart函数。理想情况下，你可以做这样的事情：

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

但是由于google.load在文档＆＃34; load＆＃34;之后调用的方式很有效。事件触发，＆＃39; google.setOnLoadCallback＆＃39;不起作用 - 设置回调的唯一方法是与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);
});

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

1 个答案: