c# – 如何隐藏谷歌可视化中的列

我使用下面的代码来显示谷歌图表,我想在点击第一个图表时显示另一个图表,这里需要传递值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() + "',\'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','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列将值作为参数传递,但它在图表中显示为列,如何隐藏此列？

解决方法

您可以使用 DataView Class隐藏列

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 Class还具有Column和Cell Properties的方法