使用 Google Charts 绘制烛台图时传递多维数组-html教程-PHP中文网

使用 Google Charts 绘制烛台图时传递多维数组

DDD

发布： 2025-08-28 23:32:01

原创

920人浏览过

使用 google charts 绘制烛台图时传递多维数组

本文档旨在解决在使用 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);

登录后复制

data: 要转换成 DataTable 的数组。该数组可以是二维数组，也可以是包含列定义的对象数组。
opt_firstRowIsData: 一个可选的布尔值。如果设置为 true，则将数组的第一行视为数据，而不是列标签。

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

示例代码

以下是一个完整的示例，展示了如何从 HTML 表格中提取数据，并将其传递给 google.visualization.arrayToDataTable 函数，最终绘制烛台图。

<div >
    <div>
        <button>OK</button>
        <table id="haha">
            <thead>
                <tr>
                    <td>date</td>
                    <td>open</td>
                    <td>close</td>
                    <td>high</td>
                    <td>low</td>
                    <td>change</td>
                </tr>
            </thead>
            <tr class="data">
                <td class="date_">2022-05-25 12:00</td>
                <td class="open">12</td>
                <td class="close">864</td>
                <td class="high">889</td>
                <td class="low">76</td>
                <td class="change">66</td>
            </tr>
            <tr class="data">
                <td class="date_">2022-05-25 13:00</td>
                <td class="open">765</td>
                <td class="close">45</td>
                <td class="high">97</td>
                <td class="low">82</td>
                <td class="change">613</td>
            </tr>
        </table>
    </div>
</div>
<div id="chart" style="width: 900px; height: 500px;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
$(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{
                    subdata.push(parseFloat(class_table[x].innerHTML))
                }

            };                    
            chartdata.push(subdata);
        };

        // 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 = new google.visualization.DataTable();
            data.addColumn('string', 'Date');
            data.addColumn('number', 'Open');
            data.addColumn('number', 'Close');
            data.addColumn('number', 'High');
            data.addColumn('number', 'Low');
            data.addRows(chartdata);

            var options = {
            legend:'none',
            };

            var chart = new google.visualization.CandlestickChart(document.getElementById('chart'));
            chart.draw(data, options);
        };      
    })        
});
</script>

登录后复制

关键修改：

原始代码中，错误地将 chartdata 包装在另一个数组中，导致 arrayToDataTable 接收到的实际上是三维数组。正确的做法是直接将 chartdata 传递给 arrayToDataTable，或者使用 DataTable 对象手动添加列和行。

四维时代AI开放平台

查看详情

修改前：

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', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Low');
data.addRows(chartdata);

登录后复制

或者也可以修改成

var data = google.visualization.arrayToDataTable([
    ['Date', 'Open', 'Close', 'High', 'Low'],
    ...chartdata
  ], { firstRowIsData: true });

登录后复制

此修改确保了 arrayToDataTable 接收到的是一个二维数组，其中每一行代表一个烛台的数据。

注意事项

数据类型： 确保数组中的数据类型与 Google Charts 期望的类型一致。例如，日期应该是字符串，价格应该是数字。
数据顺序： 确保数组中的数据顺序与烛台图的列顺序一致（日期、开盘价、收盘价、最高价、最低价）。
错误处理： 在实际应用中，应该添加错误处理机制，以处理可能出现的异常情况，例如数据格式错误或网络连接问题。

总结

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

以上就是使用 Google Charts 绘制烛台图时传递多维数组的详细内容，更多请关注php中文网其它相关文章！