Question

我有这个div：

 <div>
    <asp:Literal ID="lt" runat="server"></asp:Literal>
</div>  
<div id="chart_div1"   style="width: 900px; height: 500px;"></div>

运行良好，可以很好地显示条形图。我在代码隐藏中添加的bindchart（）函数：

.. str.Append(@"<script type=text/javascript> google.load( *visualization*, *1*, {packages:[*corechart*]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
...
str.Append(@"<script type=text/javascript> google.load( *visualization*, *1*, {packages:[*corechart*]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
            var data = new google.visualization.DataTable();

..
str.Append(" var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));");
    str.Append(" chart.draw(data,{isStacked:true, width:900, height:350, hAxis: {showTextEvery:1, slantedText:true}});}");
...
    str.Append("</script>");
    lt.Text = str.ToString().TrimEnd(',').Replace('*', '"');
    ...

但是当我添加

"runat="server"

到id =“chart_div1”

 <div>
    <asp:Literal ID="lt" runat="server"></asp:Literal>
</div>  
<div id="chart_div1"  runat="server"  style="width: 900px; height: 500px;"></div>

然后我可以看到div显示为空白，无法看到图表！为什么这么奇怪？我需要输入runat =“server”，以便我可以识别我的代码中的id以进一步处理。有什么建议吗？

Answer 1

也许这是asp.net自动命名，它将你的“chart_div1”变成类似“ctl00_ContentPlaceHolder1_chart_div1”的东西。如果您的目标是ASP.NET 4.0，可以在页面指令中关闭它，只需设置ClientIDMode =“Static”即可。这将产生与控件中的ID完全相同的ID。

Answer 2

更改此行

  str.Append(" var chart = new     google.visualization.ColumnChart(document.getElementById('chart_div1'));");

TO

str.Append(" var chart = new     google.visualization.ColumnChart(document.getElementById('<%=chart_div1.ClientID %>'));");

这背后的共鸣就是当你将runat服务器属性应用于你的元素时，元素变成了服务器端，并且asp.net框架为它添加了一些字符串，因此该元素的id改变了

添加runat =“server”时为什么google图表不显示？

2 个答案: