使用asp.net的highchart动态绑定

本文关键字：highchart 动态绑定 net asp 使用 | 更新日期: 2023-09-27 18:28:31

我正在尝试动态绑定数据，以比较一个月的数据和两个位置的折线图。

为此，我在下面创建了代码，它运行良好。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Monthly.aspx.cs" Inherits="Monthly" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Monthly Chart</title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script src="https://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Monthly Average Details'
                },
                subtitle: {
                    text: 'Source: Google.com'
                },
                xAxis: {
                    categories: ['12/01/15', '12/02/15', '12/03/15', '12/04/15', '12/05/15', '12/06/15', '12/07/15', '12/08/15', '12/09/15', '12/10/15', '12/11/15', '12/12/15', '12/13/15', '12/14/15', '12/15/15', '12/16/15', '12/17/15', '12/18/15', '12/19/15', '12/20/15', '12/21/15', '12/22/15', '12/23/15', '12/24/15', '12/25/15', '12/26/15', '12/27/15', '12/28/15', '12/29/15', '12/30/15', '12/31/15']
                },
                yAxis: {
                    title: {
                        text: 'Units'
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: false //enable count
                        },
                        enableMouseTracking: false //enable Tooltip on mouse over
                    }
                },
                series: [{
                    name: 'Hyderabad - Location',
                    data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 0, 13, 9, 3, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4, 5, 9, 25, 24, 23, 60, 34]
                }, {
                    name: 'Chennai - Location',
                    data: [3, 4, 5, 8, 11, 15, 17, 16, 14, 10, 6, 4, 7, 6, 9, 0, 18, 21, 25, 26, 23, 18, 13, 9, 6, 20, 51, 54, 53, 1, 6]
                }]
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
    </div>
    </form>
</body>
</html>

上面的代码是静态编写的。现在我想动态绑定数据。

如何实施？

你能给我推荐一下吗？

使用asp.net的highchart动态绑定

对于我们（使用VB.net，但总体方法相同），我们有一个UserControl，它调用以基于UserControl负责的数据（来自Web服务、ajax调用或老式DTO）获得图表javascript。它调用了我们编写的库，该库包含数据集（单系列或多系列）、大小选项和我们想要的此特定图表的其他选项（如图表类型、标题、源页脚等）。根据这些选项，我们使用StringBuilder构建HighCharts script标记条目。然后，我们创建div以使用literal来保持图表。然后，我们将创建的客户端js脚本（使用StringBuilder）注册到使用Page.ClientScript.RegisterClientScriptBlock(...)的页面中。

这在很大程度上取决于您的具体需求，我不想谈太多细节，因为在我们的系统中有很多事情你可能/可能不需要做。

另一种更"通用"的方法是，如果您的页面中已经有要在HTML table中绘制的数据，则可以直接从表中读取并将数据添加到图表中（示例）。当然，这意味着您的asp.net页面已经将数据拉入了表中。

另一种方法是使用HighCharts.NET的新测试版（请参阅此处）。这使用MVC。

你也可以使用HighCharts的其他.NET实现，但我发现没有一个令人满意，所以我们编写了自己的实现。

相关文章：