本文档旨在帮助开发者在使用 Google Charts 绘制烛台图时，正确地将多维数组数据传递给 google.visualization.arrayToDataTable 函数。通过示例代码和详细解释，避免 “Last domain does not have enough data columns (missing 3)” 错误，并确保图表能够正确渲染。
正确传递多维数组数据
在使用 google.visualization.arrayToDataTable 函数时，需要注意其参数的格式。该函数期望接收一个二维数组作为输入，其中每一行代表图表中的一行数据。如果你的数据已经是一个二维数组，那么不需要将其包裹在额外的数组中。
错误示例：
var data = google.visualization.arrayToDataTable([chartdata],true); // 错误：chartdata 已经被包裹在额外的数组中
正确示例：
var data = google.visualization.arrayToDataTable(chartdata,true); // 正确：直接传递 chartdata
在这个例子中，chartdata 变量本身就是一个二维数组，包含了烛台图所需的数据（日期、开盘价、收盘价、最高价、最低价）。因此，直接将 chartdata 传递给 google.visualization.arrayToDataTable 函数即可。
完整代码示例
以下是修改后的完整 JavaScript 代码，用于从 HTML 表格中提取数据并绘制烛台图：
$(document).ready(function(){ $(document).on("click", "button", function(){ var parenthis = this.parentElement; var tr = parenthis.querySelectorAll('.data'); var chartdata = []; for(var x=0 ; x < tr.length ; x++){ var subdata = []; var array=['date_','open','close','high','low']; for(var y=0 ; y < array.length ; y++){ var class_table = parenthis.querySelectorAll("[class=" + CSS.escape(array[y]) + "]"); if(y==0){ subdata.push(class_table[x].innerHTML); } else if(y==4){ subdata.push(parseFloat(class_table[x].innerHTML)); chartdata.push(subdata); } else{ subdata.push(parseFloat(class_table[x].innerHTML)) } }; }; // candlestick chart google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart(){ // [[str,num/float,num/float,num/float,num/float],] var data = google.visualization.arrayToDataTable(chartdata,true); // 修改这里 var options = { legend:'none', }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart')); chart.draw(data, options); }; }) });
HTML 代码保持不变：
date open close high low change 2022-05-25 12:00 12 864 889 76 66 2022-05-25 13:00 765 45 97 82 613
总结
正确地将多维数组传递给 google.visualization.arrayToDataTable 函数是使用 Google Charts 绘制图表的关键一步。 确保数据格式与函数期望的格式一致，可以避免常见的错误，并确保图表能够正确渲染。 在本例中，直接传递二维数组 chartdata 即可解决问题。
以上就是使用 Google Charts 绘制烛台图时传递多维数组的正确方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573773.html
微信扫一扫 
支付宝扫一扫 
