如何利用Google sdk sample 如何利用google maps制作地图

本文档旨在解决在使用 Google Charts 类似蜡烛台图时，如何正确调用多维数据传输给 google.visualization.arrayToDataTable 函数的问题。通过示例代码详细解释，帮助开发者避免常见的错误，并成功创建出所需的蜡烛台图。核心在于理解 arrayToDataTable 函数的参数要求，并确保数据格式匹配。

在 Google Charts 中使用类似的烛光台图时，需要经常将数据从 JavaScript 阵列传送给 google.visualization.arrayToDataTable 函数。该函数负责将阵列数据传送为 Google Charts 可以理解的数据表格式。但是，如果数据格式不正确，可能会导致 Last domain does not have enough data columns (missing 3) 这样的错误。本文将详细介绍如何正确处理多维阵列传送给 arrayToDataTable 函数，并提供一个完整的结果。理解 arrayToDataTable函数

google.visualization.arrayToDataTable 函数的签名如下：google.visualization.arrayToDataTable(data， opt_firstRowIsData)；登录后复制数据：要转换成DataTable的备份。该备份可以是二维备份，也可以是包含列定义的对象备份。opt_firstRowIsData：一个可选的布尔值。如果设置为true，则将备份的第一行数据看成是列标签。

关键配置数据参数的格式。对于简单的二维数组，每一行代表一个数据点，每一列代表数据点的不同属性。对于烛台图，通常需要包含日期、开盘价、收盘价、最高价和最低价。示例代码

以下是一个完整的示例，显示了从 HTML 表格中获取数据，将其传递给 google.visualization.arrayToDataTable 函数，最终如何关联烛光台图。

lt；div gt； lt；divgt； lt；buttongt；OKlt；/buttongt； lt；table id=quot；hahaquot；gt； lt；theadgt； lt；trgt； lt；tdgt；datelt；/tdgt； lt；tdgt；openlt；/tdgt； lt；tdgt；closelt；/tdgt； lt；tdgt；highlt；/tdgt； lt；tdgt；lowlt；/tdgt； lt；tdgt；changelt；/tdgt； lt；/trgt； lt；/theadgt； lt；tr class=quot；dataquot；gt； lt；td class=quot；date_quot；gt；2022-05-25 12：00lt；/tdgt； lt；td class=quot；openquot；gt；12lt；/tdgt； lt；td class=quot；收盘quot；gt；864lt；/tdgt； lt；td class=quot；高quot；gt；889lt；/tdgt； lt；td class=quot；低quot；gt；76lt；/tdgt； lt；td class=quot；变化quot；gt；66lt；/tdgt； lt；/trgt； lt；tr class=quot；数据quot；gt； lt；td class=quot；日期quot；gt；2022-05-25 13：00lt；/tdgt； lt；td class=quot；开盘quot；gt；765lt；/tdgt； lt；td class=quot；收盘quot；gt；45lt；/tdgt； lt；td class=quot；高quot；gt；97lt；/tdgt； lt；td class=quot；低quot；gt；82lt；/tdgt； lt；td class=quot；changequot；gt；613lt；/tdgt； lt；/trgt； lt；/tablegt； lt；/divgt；lt；/divgt；lt；div id=quot；chartquot； style=quot；width： 900px； height： 500px；quot；gt；lt；/divgt；

lt；script src="；https：//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.jsquot；gt；lt；/scriptgt；lt；script type=quot；text/javascriptquot； src=quot；https：//www.gstatic.com/charts/loader.jsquot；gt；lt；/scriptgt；lt；scriptgt；$(document).ready(function(){ $(document).on(quot；clickquot；， quot；buttonquo​​t；， function(){ var parenthis = this.parentElement； var tr = parenthis.querySelectorAll('.data')； var chartdata = []； for(var x=0 ； x lt； tr.length ； x ){ var subdata = []； var array=['date_'，'open'，'close'，'high'，'low']； for(var y=0 ； y lt； array.length ； y ){ var class_table = parenthis.querySelectorAll(quot；[class=quot； CSS.escape(array[y]) quot；]quot；)； if(y==0){ subdata.push(class_table[x].innerHTML)； } else{ subdata.push(parseFloat(class_table[x].innerHTML)) } }； chartdata.push(subdata)； }； // 蜡烛图 google.charts.load('current'， {'packages'：['corechart']})； google.charts.setOnLoadCallback(drawChart)； function drawChart(){ // [[str，num/float，num/float，num/float，num/float]，] var data = new google.visualization.DataTable()； data.addColumn('string'， 'Date')； data.add

Column('number'， '开盘')； data.addColumn('number'， '收盘')； data.addColumn('number'， '最高价')； data.addColumn('number'， '最低价')； data.addRows(chartdata)； var options = { legend：'none'， }； var Chart = new google.visualization.CandlestickChart(document.getElementById('chart'))；chart.draw(data，options)； }； }) })；lt；/scriptgt；登录后复制

关键修改：

原始代码中，错误地将chartdata包装在另一个阵列中，导致arrayToDataTable接收到的实际是三维阵列。正确的做法是直接将chartdata传入给arrayToDataTable，或者使用DataTable

修改前：var data = google.visualization.arrayToDataTable([chartdata]，true)；登录后复制

修改后：// var data = google.visualization.arrayToDataTable(chartdata，true)；var data = new google.visualization.DataTable()；data.addColumn('string'， 'Date')；data.addColumn('number'， '开盘')；data.addColumn('number'， '收盘')；data.addColumn('number'， '最高价')；data.addColumn('number'， '最低价')；data.addRows(chartdata)；登录后复制

或者也可以修改成var data = google.visualization.arrayToDataTable([ ['日期'， '开盘'， '收盘'， '最高价'， 'Low']， ...chartdata ]， { firstRowIsData： true })；登录后复制修改

这样保证了 arrayToDataTable 接收到的是一个二维队列，其中每一行代表一个烛台的数据。注意事项数据类型：确保队列中的数据类型与 Google Charts 期望的类型一致。例如，日期应该是字符串，价格应该是数字。数据顺序：确保队列中的数据顺序与蜡烛台图的列顺序一致（日期、开盘价、收盘价、最高价、最低价）。 错误处理：在实际应用中，应该添加错误处理机制，以处理可能出现的异常情况，例如数据格式错误或网络连接问题。

总结

正确绕过多维交接给google.visualization.arrayToDataTable函数是使用Google Charts相似蜡烛台图的关键步骤。通过理解arrayToDataTable函数的参数要求，并确保数据格式匹配，可以避免创建常见的错误，并成功出准确的蜡烛台图。本文提供的示例代码和注意事项可以帮助开发者更好地理解和应用Google Charts。

以上就是使用Google Charts近期台图时交付多维库存的详细内容，更多请关注乐哥常识网相关其他文章！