如何从Google可视化中隐藏列 [英] how to hide a column from google visualization

问题描述

我已使用以下代码显示Google图表，我想在单击第一个图形时显示另一个图形，这里需要传递值 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(resourceDetails.Distinct().ToArray()中的可变项){dt = GetIndividualData(item.ResourceId，projectId);如果(dt.Rows.Count> 0){对于(int i = 0; i< = dt.Rows.Count-1; i ++){DataRow行= 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);}}}如果(dataTable.Rows.Count> 0){stringBuilder.Append(@&script; type = * text/javascript *> google.load(* visualization *，* 1 *，{packages:[* corechart *]});;google.setOnLoadCallback(drawChart);函数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 +");对于(int i = 0; i< = dataTable.Rows.Count-1; i ++){如果(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 \']););}别的{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()+，\'红色\']);");}}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 列将值作为参数传递，但它在图表中显示为一列，如何隐藏此列呢?

解决方案

您可以使用 setRowProperty(rowIndex，name，value)
和
getRowProperty(rowIndex，name)

DataTable类也具有用于列和单元格属性的方法

I have used below code to show google chart, I want to show another graph when clicking on first graph and here need to pass the value 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('*', '"');

    }
}

here I have used ResouceId column to pass the value as a parameter, but it shows in chart as a column, how can I hide this column from showing?

解决方案

You can use the DataView Class to hide columns

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

However, it may make sense in this case to use a Row Property instead
which does not appear in the chart

You can define your own properties with
setRowProperty(rowIndex, name, value)
and
getRowProperty(rowIndex, name)

The DataTable Class also has methods for Column and Cell Properties

这篇关于如何从Google可视化中隐藏列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！