谷歌可视化数据视图.setRows():无效的行索引错误

Google Visualization dataview.setRows(): invalid row index error

本文关键字:无效 索引 错误 数据 可视化 视图 setRows 谷歌      更新时间:2023-09-26

在我的代码中,我使用谷歌可视化创建了一个数据视图,它包含300多行。当我试图通过指定精确的行索引来过滤行时,控制台会产生错误:

SCRIPT5022:行索引4无效。应在[0-380]范围内。

这是JavaScript:

function filter(t) {
    var view = new google.visualization.DataView(data);
    if (t.colQuery.value) {
        view.setColumns(t.colQuery.value.split('/'));
    }
    if (t.rowQuery.value) {
        view.setRows(t.rowQuery.value.split('/'));
    }
    chart.draw(view, {
        allowHtml: true
    });
}

这就是HTML:

<div id='form'>
    <form id='serverForm'>Enter server name(s):
        <!-- textbox and button for server name(s) -->
        <textarea id='text' onkeypress='checkKey(event, this.form)'></textarea>
        <button onclick='drawChart(this.form); return false;'>Table/Refresh</button>
    </form>
    <form id='queryForm'>Enter column query:
        <!-- textbox and button for queries -->
        <input type='text' id='colQuery'></input>Enter row query:
        <input type='text' id='rowQuery'></input>
        <button onclick='filter(this.form); return false;'>Filter</button>
    </form>
</div>

当你接受输入并用正斜杠分割时,你会得到一个字符串数组。但是,setRows()setColumns()需要整数数组(索引)。

您需要先将它们映射为整数。只需少量修改,就可以做到这一点:

更改自:

view.setRows(t.rowQuery.value.split('/'));

到此:

view.setRows(t.rowQuery.value.split('/').map(function(v){ return parseInt(v) }));