如何在谷歌可视化中隐藏列

Question

我用下面的代码来显示谷歌图表，我想在点击第一个图时显示另一个图，这里需要传递值ResourceId

if (resourceDetails != null)
{
    dataTable.Columns.Add("ResourceName", typeof(string));
    dataTable.Columns.Add("ResourceId", typeof(int));
    dataTable.Columns.Add("Planned", typeof(float));
    dataTable.Columns.Add("Actual", typeof(float));
    foreach (var item in resourceDetails.Distinct().ToArray())
    {
        dt = GetIndividualData(item.ResourceId, projectId);
        if (dt.Rows.Count > 0)
        {
            for (int i = 0; i <= dt.Rows.Count - 1; i++)
            {
                DataRow row = dataTable.NewRow();
                row["ResourceName"] = item.ResourceName;
                row["ResourceId"] = item.ResourceId;
                row["Planned"] = float.Parse(dt.Rows[i]["Planned"].ToString());
                row["Actual"] = float.Parse(dt.Rows[i]["Actual"].ToString());
                dataTable.Rows.Add(row);
            }
        }
    }
    if (dataTable.Rows.Count > 0)
    {
        stringBuilder.Append(@"<script type=*text/javascript*> google.load( *visualization*, *1*, {packages:[*corechart*]});
                                    google.setOnLoadCallback(drawChart);
                                    function drawChart() {
                                    var data = new google.visualization.DataTable();
                                    data.addColumn('string', 'ResourceName');
                                    data.addColumn('number', 'ResourceId');
                                    data.addColumn('number', 'Planned');
                                    data.addColumn({type: 'string', role: 'style'});
                                    data.addColumn('number', 'Actual');
                                    data.addColumn({type: 'string', role: 'style'});
                ");
        // data.addRows(" + dataTable.Rows.Count + ");
        for (int i = 0; i <= dataTable.Rows.Count - 1; i++)
        {
            if (Convert.ToDecimal(dataTable.Rows[i]["Planned"]) > Convert.ToDecimal(dataTable.Rows[i]["Actual"]))
            {
                stringBuilder.Append("data.addRow(['" + dataTable.Rows[i]["ResourceName"].ToString() + "'," + dataTable.Rows[i]["ResourceId"].ToString() + ", " + dataTable.Rows[i]["Planned"].ToString() + ",'color:DeepSkyBlue'," + dataTable.Rows[i]["Actual"].ToString() + ",'color:green']);");
            }
            else
            {
                stringBuilder.Append("data.addRow(['" + dataTable.Rows[i]["ResourceName"].ToString() + "', " + dataTable.Rows[i]["ResourceId"].ToString() + "," + dataTable.Rows[i]["Planned"].ToString() + ",'color:DeepSkyBlue'," + dataTable.Rows[i]["Actual"].ToString() + ",'color:red']);");
            }

        }
        stringBuilder.Append(" var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));");
        stringBuilder.Append(" chart.draw(data, {width: 660, height: 500, title: 'Resource-Performance Graph',");
        stringBuilder.Append("legend: {position: 'none'},");
        stringBuilder.Append("hAxis: {title: 'Resource', titleTextStyle: {color: 'green'},slantedText:true},width:'645',colors: ['DeepSkyBlue','green'],");
        stringBuilder.Append("vAxis:{title: 'Effort (Hr)',titleTextStyle: {color: 'green'}}");


        stringBuilder.Append("});");

        stringBuilder.Append(" google.visualization.events.addListener(chart, 'onmouseover', function() {$('#chart_div').css('cursor','pointer');});");
        stringBuilder.Append(" google.visualization.events.addListener(chart, 'onmouseout', function() {$('#chart_div').css('cursor','default');});");
        stringBuilder.Append("google.visualization.events.addListener(chart, 'select', function() {");
        stringBuilder.Append("var selection = chart.getSelection();var row = selection[0].row;var col = selection[0].column;var rId = data.getValue(row, 1); var pid = '" + projectId + "'; var pname = '" + projectName + "'; var resId = '" + Convert.ToInt32((Session["ResourceId"])) + "';");
        stringBuilder.Append("location.href = '" + ConfigurationManager.AppSettings["SiteLink"].ToString() + "/IndividualGraph.aspx?pId=' + pid + '&pName=' + pname +'&pResId=' + rId ; ");
        stringBuilder.Append("});");
        stringBuilder.Append("}");
        stringBuilder.Append("</script>");
        lt.Text = stringBuilder.ToString().Replace('*', '"');
    }
}

在这里，我使用了ResouceId列作为参数传递值，但它在图表中显示为列，我如何隐藏此列以避免显示？

Answer 1

您可以使用DataView类来隐藏列

var data = new google.visualization.DataTable();
data.addColumn('string', 'ResourceName');
data.addColumn('number', 'ResourceId');
data.addColumn('number', 'Planned');
data.addColumn({type: 'string', role: 'style'});
data.addColumn('number', 'Actual');
data.addColumn({type: 'string', role: 'style'});
var view = new google.visualization.DataView(data);
view.hideColumns([1]);  // array of column indexes to hide

但是，在这种情况下，使用行属性可能是有意义的
它没有出现在图表中

您可以使用
定义自己的属性setRowProperty(rowIndex, name, value)
和
getRowProperty(rowIndex, name)

DataTable类还有列和单元格属性的方法