Question

我正在创建基于谷歌API的折线图，我想根据用户选择来显示列。我正在使用dataview，如果我在代码中设置数据列它可以工作，但如果我尝试动态设置它不起作用，如下面的示例

    var dataViewMean = new google.visualization.DataView(dataTable);
    //dataViewMean.setColumns([check_vals.join()]); //This doesn't work
    dataViewMean.setColumns([0, 1, 2, 3, 4]); //This works

这是我的HTML

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <div id="chart_index" style="width: 400px; height: 200px;"></div>
    <div>
    <div id="chart_mean" style="width: 400px; height: 200px;"></div>
    <div>
    <table cellpadding="0" cellspacing="15" border="0">
        <tr>
            <td>
                <div>
                    <input name="sChk" type="checkbox" class="chkVals" value="1" checked="checked" />&nbsp;Current</div>
            </td>
            <td>
                <div>
                    <input name="sChk" type="checkbox" class="chkVals" value="2" checked="checked" />&nbsp;95th Percentile</div>
            </td>
            <td>
                <div>
                    <input name="sChk" type="checkbox" class="chkVals" value="3" checked="checked" />&nbsp;Free Flow</div>
            </td>
            <td>
                <div>
                    <input name="sChk" type="checkbox" class="chkVals" value="4" checked="checked" />&nbsp;Mean</div>
            </td>
        </tr>
    </table>
</div>

以下是我的脚本

    <script type="text/javascript">
$(function() {
    $(".chkVals").on('click', function(e) {
        //alert("hi");
        drawTTCharts();
    });

});


google.load('visualization', '1', {
    packages: ['linechart']
});
google.setOnLoadCallback(drawTTCharts);



function drawTTCharts() {

    var chartTitle;

    // Create and populate the data table.
    var dataTable = new google.visualization.DataTable();

    // checkbox select for choosing the column to draw travel time chart    
    var check_vals = [];
    check_vals.push(0);

    for (var i = 0; i < document.getElementsByName("sChk").length; i++) {
        if (document.getElementsByName("sChk")[i].checked) {
            check_vals.push(document.getElementsByName("sChk")[i].value);
        }
    }

    //Declare column Index Chart: Testing data view
    dataTable.addColumn('string', 'Start Time');
    dataTable.addColumn('number', 'Current Travel Time');
    dataTable.addColumn('number', '95th Percentile Travel Time');
    dataTable.addColumn('number', 'Free Flow Travel Time');
    dataTable.addColumn('number', 'Mean Travel Time');
    dataTable.addColumn('number', 'Travel Time Index');
    dataTable.addColumn('number', 'Planning Time Index');
    dataTable.addColumn('number', 'Buffer Time Index');


    dataTable.addRows([
        ['02:20:00', 114.60, 98, 118.00, 114.88, 1.17, .03, 1.20],
        ['02:25:00', 113.00, 98, 117.25, 115.01, 1.17, .02, 1.20],
        ['02:30:00', 113.00, 98, 118.00, 115.06, 1.17, .03, 1.20],
        ['02:35:00', 113.00, 98, 117.80, 114.77, 1.17, .03, 1.20],
        ['02:40:00', 112.80, 98, 119.00, 114.72, 1.17, .04, 1.21],
        ['02:45:00', 110.40, 98, 119.00, 115.68, 1.18, .03, 1.21],
        ['02:50:00', 109.00, 98, 118.00, 114.74, 1.17, .03, 1.20],
        ['02:55:00', 113.00, 98, 117.60, 114.37, 1.17, .03, 1.20],
        ['03:00:00', 115.00, 98, 117.60, 114.90, 1.17, .03, 1.20],
        ['03:05:00', 115.00, 98, 117.40, 114.53, 1.17, .03, 1.20],
        ['03:10:00', 115.00, 98, 118.00, 114.58, 1.17, .03, 1.20],
        ['03:15:00', 115.00, 98, 117.80, 114.93, 1.17, .03, 1.20],
        ['03:20:00', 115.00, 98, 116.80, 114.15, 1.16, .03, 1.19],
        ['03:25:00', 115.00, 98, 116.00, 113.83, 1.16, .02, 1.18],
        ['03:30:00', 110.80, 98, 117.00, 114.06, 1.16, .03, 1.19],
        ['03:35:00', 108.00, 98, 117.00, 114.03, 1.16, .03, 1.19]
    ]);


    var dataViewMean = new google.visualization.DataView(dataTable);

    //alert(check_vals.join());

//dataViewMean.setColumns([check_vals.join()]); //This doesn't work
    dataViewMean.setColumns([0, 1, 2, 3, 4]); //This works



    var dataViewIndex = new google.visualization.DataView(dataTable);
    dataViewIndex.setColumns([0, 5, 6, 7]); //Select columns for chart

    drawMeanChart(dataViewMean);
    drawIndexChart(dataViewIndex);

}


function drawMeanChart(pDataMean) {

    //alert(pDataMean);
    // Create and draw Mean the visualization.
    new google.visualization.LineChart(document.getElementById('chart_mean')).
    draw(pDataMean, {
        curveType: "function",
        //title: chartTitle,
        width: 445,
        height: 220,
        backgroundColor: '#FFEBC2',
        vAxis: {
            title: 'Travel Time (Sec.)'
        },
        hAxis: {
            title: 'Time Interval'
        },
        legend: {
            position: 'top'
        } //,
        //series: { 2: { targetAxisIndex: 1 }, 3: { targetAxisIndex: 1 }, 3: { targetAxisIndex: 1} }, 
        //vAxes: { 1: { title: 'Index'} }
    });

}

function drawIndexChart(pDataIndex) {

    // Create and draw Index the visualization.
    new google.visualization.LineChart(document.getElementById('chart_index')).
    draw(pDataIndex, {
        curveType: "function",
        //title: chartTitle,
        width: 445,
        height: 220,
        backgroundColor: '#CDE6FF',
        vAxis: {
            title: 'Index'
        },
        hAxis: {
            title: 'Time Interval'
        },
        legend: {
            position: 'top'
        }
    });

}
    </script>

请提前帮助，谢谢。

我在JSFiddle中的完整代码http://jsfiddle.net/brijesh26/e6Fnm/

Answer 1

check_vals已经是一个数组。通过调用join方法，您将从数组创建一个字符串，并将其添加到另一个数组，因此您将包含字符串的数组传递给setColumns方法。这样：

dataViewMean.setColumns([check_vals.join()]);

相当于：

dataViewMean.setColumns(['1,2,3,4...']);

单独传递check_vals：

dataViewMean.setColumns(check_vals);

<强> [编辑]

经过进一步检查，check_vals是一个字符串数组，因此在填充数组时应该将它们解析为整数：

check_vals.push(parseInt(document.getElementsByName("sChk")[i].value));

Google Chart API无法动态设置数据视图列

1 个答案: