程序员经验分享-hwhale

给定 DataTable 时 Google Charts draw() 方法类型错误

2023-12-01

我试图使用 HTML 和 Javascript 在 Google Charts 中显示带有范围过滤器的折线图，但是每当我运行draw()函数，代码告诉我我使用了错误的数据类型draw()参数（它应该是一个DataTable）。然而，我使用构建我的数据arrayToDataTable()，根据 Google Charts API文档，创建一个数据表。这是我的完整代码：

<html>
    <head>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            //Chart data
            google.charts.load('current',{'packages':['controls']});
            google.charts.setOnLoadCallback(drawDashboard);

            function drawDashboard(){
                var dataSet = google.visualization.arrayToDataTable([
                    [{label:'date',type:'datetime'},{label:'Bytes from network:Bytes to network',type:'number'}],
                    [new Date(2016,01,23,00,00),1.0],
                    [new Date(2016,01,23,01,00),1.0075187969924813],
                    [new Date(2016,01,23,03,00),1.126865671641791],
                    [new Date(2016,01,24,22,00),0.987012987012987],
                    [new Date(2016,01,25,01,00),1.0],
                    [new Date(2016,01,25,02,00),0.9166666666666666],
                    [new Date(2016,01,25,10,00),1.0],
                    [new Date(2016,01,26,12,00),1.0],
                    [new Date(2016,01,27,17,00),0.9864864864864865],
                    [new Date(2016,01,28,22,00),0.03125],
                    [new Date(2016,02,01,22,00),0.97],
                ]);

                var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

                var dateRangeFilter = new google.visualization.ControlWrapper({'controlType':'ChartRangeFilter','containerId':'filter_div','options': {'filterColumnLabel':'date'}});

                var lineChart = new google.visualization.ChartWrapper({'chartType':'LineChart','containerId':'curve_chart','options':{'title': 'Total Bytes from the Source Network to Total Bytes To the Source Network per Day','curveType': 'function','legend': {'postition':'bottom'}}});

                dashboard.bind(dateRangeFilter,lineChart);

                dashboard.draw(dataSet);
            }
        </script>
    </head>
    <body>
        <!--draw charts using corresponding div tags-->
        <div id="dashboard_div">
            <div id="filter_div"></div>
            <div id="curve_chart" style="width:900px;height:500px"></div>
        </div>
    </body>
</html>

正如您所看到的，我创建了一个名为dataSet using google.visualization.arrayToDataTable()，它返回一个DataTable。然后，在底部drawDashboard()方法，我调用dashboard.draw(dataSet)，这会引发错误

You called the draw() method with the wrong type of data rather than a DataTable or DataView

我不确定为什么它会抛出这个错误，因为dataSet显然是一个例子DataTable班级。我多次尝试清除缓存和 cookie，但没有成功。


尝试删除对的引用http://www.google.com/jsapi

你应该只需要loader.js

我在使用时也发现loader.js，除了以下内容之外，还需要包含包'controls' 

google.charts.load('current', {
    packages: ['controls', 'corechart'],
    callback: drawDashboard
});

function drawDashboard() {
    var dataSet = google.visualization.arrayToDataTable([
        [{label:'date',type:'datetime'},{label:'Bytes from network:Bytes to network',type:'number'}],
        [new Date(2016,01,23,00,00),1.0],
        [new Date(2016,01,23,01,00),1.0075187969924813],
        [new Date(2016,01,23,03,00),1.126865671641791],
        [new Date(2016,01,24,22,00),0.987012987012987],
        [new Date(2016,01,25,01,00),1.0],
        [new Date(2016,01,25,02,00),0.9166666666666666],
        [new Date(2016,01,25,10,00),1.0],
        [new Date(2016,01,26,12,00),1.0],
        [new Date(2016,01,27,17,00),0.9864864864864865],
        [new Date(2016,01,28,22,00),0.03125],
        [new Date(2016,02,01,22,00),0.97],
    ]);

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

    var dateRangeFilter = new google.visualization.ControlWrapper({'controlType':'ChartRangeFilter','containerId':'filter_div','options': {'filterColumnLabel':'date'}});

    var lineChart = new google.visualization.ChartWrapper({'chartType':'LineChart','containerId':'curve_chart','options':{'title': 'Total Bytes from the Source Network to Total Bytes To the Source Network per Day','curveType': 'function','legend': {'postition':'bottom'}}});

    dashboard.bind(dateRangeFilter,lineChart);

    dashboard.draw(dataSet);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
    <div id="filter_div"></div>
    <div id="curve_chart" style="width:900px;height:500px"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

dataTable

googleapi

googlevisualization

给定 DataTable 时 Google Charts draw() 方法类型错误 的相关文章

随机推荐

  • urllib2支持抢占式认证吗？

    我正在尝试访问 REST API 我可以让它在 Curl REST Client UI 工具 中工作 并启用抢先身份验证 但是 使用 urllib2 默认情况下它似乎不支持此功能 并且我找不到打开它的方法 谢谢 这是一个简单的抢占式 HTT

  • 使用 keras.utils.Sequence 时，keras Predict_generator 会打乱其输出

    我正在使用 keras 构建一个输入 720x1280 图像并输出值的模型 我有问题keras models Sequential predict generator当使用keras utils Sequence类来获取与验证 训练集上的图

  • SQL Server IN 与 EXISTS 性能

    我很好奇下面哪一个会更有效 我一直对使用有点谨慎IN因为我相信 SQL Server 将结果集变成一个大的IF陈述 对于大型结果集 这可能会导致性能不佳 对于小型结果集 我不确定哪一个更好 对于大型结果集 不会EXISTS更有效率吗 WHE

  • LSTM 与 Keras

    我有一些训练数据x train以及一些相应的标签x train called y train 这是如何x train and y train构造 train x np array np random rand 1 1000 0 for i

  • 将数组复制到数组

    我对数组有一个小问题 我是 C 新手 我尝试复制一个int数组分成另外两个int数组与 unsortedArray randomNumbers unsortedArray2 unsortedArray unsortedArray3 unso

  • cv2.MOTION_EUCLIDEAN 用于ECC图像对齐方法中的warp_mode

    我使用以下方法来对齐图像 当我将 warp mode 定义为 cv2 MOTION TRANSLATION 时 以下代码工作正常 我在具有平移位移的图像上得到了一些相当好的结果 我尝试重复此代码并将 warp mode 更改为 EUCLID

  • 将 Artifactory 升级到最新版本时出现 CATALINA_PID 和 ARTIFACTORY_PID 问题

    在将我的 Artifactory 服务器 免费 OSS 版本 从版本 5 2 0 升级到最新的 5 4 5 时 我遇到了 ARTIFACTORY PID 问题 从 5 3 2 迁移到 5 4 0 后 Artifactory 服务器不想再启动

  • 熊猫在字符串列上滚动总和

    我正在使用 Python3 和 pandas 版本 0 19 2 我有一个 pandas df 如下 chat id line 1 Hi 1 Hi how are you 1 I m well thanks 2 Is it going to

  • 如何在 Unix Shell 脚本中用 SED 替换同一文件中的行？

    在参照这个问题在第一个和第二个文件中获得匹配的行标识符后 我需要将第一个文件中的行替换为第二个文件中的行 为此 我使用 SED 如下所示 但 Sed 仅替换新文件中的该行 如何在没有临时文件的情况下在同一文件中实现更新 因为这些文件非常大

  • 如何在 cypress.json 文件中使用 .env 变量？

    我想用我的 env里面的变量cypress json文件 作为用法示例 env HOST process env HOST 我想要的是这样的 当我打字时Cypress env HOST 任何地方Cypress 我想得到process env

  • EPPlus - 命名范围未填充

    我正在使用 EPPLus 打开 Excel 电子表格并尝试从命名范围中读取 命名范围为空 是我用错了 还是EPPlus的问题 Code var package new ExcelPackage using var stream File O

  • 分配后字符数组组件的长度错误

    我想创建一个包含可分配字符数组组件的派生类型 但是 当我尝试在子例程中分配内存时 没有任何反应 通过下面的代码示例可能会更清楚 program test type t1 character len allocatable c end typ

  • MATLAB 求解方程问题

    我想用以下方程求解MATLAB and 我相信存在非零解 方程为 0 7071 x 0 7071 z x 0 5 x 0 7071 y 0 5 z y 0 5 x 0 7071 y 0 5 z z 我在 MATLAB 中写道 x y z s

  • PHP 获取多维数组中的值

    在 php 中 我如何获取下面这个数组中的值 error 我做了一个var dump myArray 我尝试过回声 myArray 0 0 and myArray 0 但这些都不起作用 array 1 0 gt array 1 error

  • SQL select 如果没有找到记录则返回 0，否则返回值

    我现在使用 Microsoft SQL 我的代码是 SELECT TOP 1 avail FROM table1 where name abc order by datetime desc 我希望当 avail 存在时 返回 avail 的

  • 使用 Tomcat 调试 GWT 应用程序 (Eclipse)

    我尝试使用tomcat部署应用程序 并且成功了 现在 我需要将 tomcat 设置为默认内置服务器 而不是内部 GWT 服务器 并用它来调试我的应用程序 我面临的问题是我能够成功地将文件上传到托管模式 但是当我尝试将应用程序部署到 tomc

  • javax.validation.constraints 的注释不起作用

    使用注解需要什么配置javax validation constraints like Size NotNull ETC 这是我的代码 import javax validation constraints NotNull import j

  • 无法让 PhpStorm 连接到在 WSL 2 中运行的 Xdebug

    我在使用以下设置让 PhpStorm 2020 2 与 xdebug 一起使用时遇到问题 WSL2 运行 Ubuntu 20 安装了 PHP 和 php xdebug 每当我在启用调试的情况下运行测试时 它都会显示 未建立连接 这是 Xde

  • 如何将 String^ 转换为 char 数组 [重复]

    这个问题在这里已经有答案了 可能的重复 需要将 String 转换为 char 我一直在寻找这个解决方案 但我找不到任何具体的东西 我在 Visual Studio C Windows 窗体应用程序中工作 我需要转换String 值存入 c

  • 给定 DataTable 时 Google Charts draw() 方法类型错误

    我试图使用 HTML 和 Javascript 在 Google Charts 中显示带有范围过滤器的折线图 但是每当我运行draw 函数 代码告诉我我使用了错误的数据类型draw 参数 它应该是一个DataTable 然而 我使用构建我的

热门标签