时间戳

首页 > 解决方案 > 如何将数据从 asp.net 传递到 javascript

javascript - 如何将数据从 asp.net 传递到 javascript

问题描述

我正在尝试以饼图/甜甜圈图格式显示我的数据。我在互联网上找到的最简单的是简单的谷歌图表。然而，它并不像看起来那么简单。我仍然坚持传递数据来生成图表。非常感谢您对像我这样的菜鸟的帮助/建议/解决方案..提前致谢

我已经有了表格格式的数据，现在我试图将显示更改为饼图/甜甜圈图。

这是我显示数据的代码..（表格格式）

<table class="table table-striped table-bordered table-hover table-checkable dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; margin-bottom: 0;">
    <tr>
        <td>Female</td>
        <td class="text-center"><asp:Literal runat="server" ID="tFemaleOccupied"></asp:Literal></td>
    </tr>
    <tr>
        <td>Mix</td>
        <td class="text-center"><asp:Literal runat="server" ID="tMixOccupied"></asp:Literal></td>
    </tr>
    <tr>
        <td>Queen</td>
        <td class="text-center"><asp:Literal runat="server" ID="tQueenOccupied"></asp:Literal></td>
    </tr>
    <tr>
        <td>Suite</td>
        <td class="text-center"><asp:Literal runat="server" ID="tSuiteOccupied"></asp:Literal></td>
    </tr>
</table>

我打算改成这个

<table class="table table-striped table-bordered table-hover table-checkable dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; margin-bottom: 0;">
    <tr>
        <td>
        <div id="piechart"></div>
        </td>
    </tr>
</table>

这是使用谷歌图表的“饼图”脚本

<asp:Content ID="Content4" ContentPlaceHolderID="cphPageScripts" runat="server">
<script src="/assets/pages/scripts/dashboard.min.js" type="text/javascript"></script>

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Room Type', 'No of Room'],
  ['Female', 'FemaleOccupied'],
  ['Mix', 'MixOccupied'],
  ['Queen', 'QueenOccupied'],
  ['Suite', 'SuiteOccupied']
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'Room Occupancy', 'width':'50%', 'height':'50%'};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>

如何将值“tFemaleOccupied”传递给数据数组中的“FemaleOccupied”？

标签： javascriptasp.net

解决方案

您在这里缺少两件事：

  • 该arrayToDataTable函数需要图形的实际数据（如数字），但您没有传递任何数据。
  • 在您的表中，您通过后面的 ASP.NET 代码设置值。这是服务器端代码，即它在页面发送到您机器上的浏览器之前在服务器上执行。但是，您尝试使用的 Google 图表库是一个 JavaScript 库，因此它的代码在客户端执行，即在页面发送给您之后在您的浏览器中执行。在 ASP.NET Web 窗体中，在 ASP.NET 控件之外的服务器端和客户端之间交换数据并不总是那么简单。

在不过多更改代码的情况下，这是实现此目的的一种方法：

<table class="table table-striped table-bordered table-hover table-checkable dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; margin-bottom: 0; display: none;">
    <tr>
        <td>Female</td>
        <td class="text-center"><asp:Literal runat="server" ID="tFemaleOccupied"></asp:Literal></td>
    </tr>
    <tr>
        <td>Mix</td>
        <td class="text-center"><asp:Literal runat="server" ID="tMixOccupied"></asp:Literal></td>
    </tr>
    <tr>
        <td>Queen</td>
        <td class="text-center"><asp:Literal runat="server" ID="tQueenOccupied"></asp:Literal></td>
    </tr>
    <tr>
        <td>Suite</td>
        <td class="text-center"><asp:Literal runat="server" ID="tSuiteOccupied"></asp:Literal></td>
    </tr>
</table>    
<table class="table table-striped table-bordered table-hover table-checkable dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; margin-bottom: 0;">
    <tr>
        <td>
        <div id="piechart"></div>
        </td>
    </tr>
</table>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    // Load google charts
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    // Draw the chart and set the chart values
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['Room Type', 'No of Room'],
        ['Female', <%= tFemaleOccupied.Text%>],
        ['Mix', <%= tMixOccupied.Text%>],
        ['Queen', <%= tQueenOccupied.Text%>],
        ['Suite', <%= tSuiteOccupied.Text%>]
        ]);

        // Optional; add a title and set the width and height of the chart
        var options = { 'title': 'Room Occupancy', 'width': '50%', 'height': '50%' };

        // Display the chart inside the <div> element with id="piechart"
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
    }
</script>

这假设您在代码后面或之前tFemaleOccupied.Text的方法中设置了等。Page_Load

正如上面评论中提到的其他人所提到的，一种更简洁的编写方法是使用 Ajax 获取图表的数据，但这也需要您想出一种方法来提供该数据（例如，Web 服务），你现在可能没有。

推荐阅读