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 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还有列和单元格属性的方法

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

1 个答案: