Question

通常，当我在代码中包含饼形图时，我只是简单地将代码放在页面底部即可生成图表。由于我需要创建越来越多的图表..以避免在我的dashboard.aspx中使用大量脚本。我创建了一个新的.js文件，名为dashboard.js，并将该js包含在Dashboard.aspx中，如下所示：

Dashboard.aspx

<asp:HiddenField runat="server" ID="PieSource"></asp:HiddenField>  
<tr>
    <td colspan="6" align="center" style="font-size:10px;white-space:nowrap; width:50%; border:0px;">
        <div id="pie_chart" style="position:center; width:100%; height:200px; font-size:10px;"></div>  
    </td>
</tr>
...
...

<script src="/assets/js/dashboard.js" type="text/javascript"></script>

数据来自Dashboard.aspx.cs，如下所示：

// Some query here
while(db.readDataSource)
{
    if (pieData.Equals(string.Empty))
    {
        pieData = "{ label: \"" + db.readValue("Name").ToString() + "\", value: " + db.readValue("Total").ToString() + " }";
    else
    {
        pieData += ", { label: \"" + db.readValue("Name").ToString() + "\", value: " + db.readValue("Total").ToString() + " }";
    }
}
db.closeDataReader();

 PieSource.Value = pieData.ToString();

这是我的dashboard.js

var Source = function () {
    if ($('#pie_chart').length == 0) {
        return;
    }

    Morris.Donut({
        element: 'pie_chart',
        data: [<%= PieSource.Value %>], 
        colors: [
            '#745BEF',
            '#7B57E7',
            '#9E45C1',
            '#D32989',
            '#E9305D',
            '#ED4A3E',
            '#EF5C29',
            '#EF7326'
        ],
    });
}

所以现在..我如何在dashboard.js中传递PieSource.Value？没有错误，但我的图表未显示。

感谢您的帮助。

Answer 1

经过反复试验..感谢@Mate ..我现在设法显示图表。我需要做的就是将变量发送到Dashboard.aspx中的js（在dashboard.js之前）

var pieData = [<%=PieSource.Value %>];

然后在dashboard.js ..中将pieData回调为数据，如下所示：

var Source = function () {
if ($('#pie_chart').length == 0) {
    return;
}

Morris.Donut({
    element: 'pie_chart',
    data: pieData, 
    colors: [
        '#745BEF',
        '#7B57E7',
        '#9E45C1',
        '#D32989',
        '#E9305D',
        '#ED4A3E',
        '#EF5C29',
        '#EF7326'
    ],
});

}

就这些。.谢谢您的帮助。

如何将数据从.cs传递到.js？

1 个答案: