Question

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

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

<%@ 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>

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

如何实施？

你能建议我吗？

Answer 1

对于我们（使用VB.net但整体方法相同），我们有一个UserControl，它根据UserControl负责的数据调用获取图表javascript（来自webservice，ajax调用或旧学校DTO）。它调用我们编写的库，它接受数据集（单个系列或多个系列），大小选项以及我们想要的特定图表的其他选项（例如图表类型，标题，源页脚等）。通过这些选项，我们使用script构建了HighCharts StringBuilder标记条目。然后，我们使用div创建literal来保存图表。然后我们使用StringBuilder将我们创建的客户端js脚本（使用Page.ClientScript.RegisterClientScriptBlock(...)）注册到页面。

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

另一个，更多＆＃34;泛型＆＃34;方法是，如果您想要在页面中已有的HTML table中绘制数据，则可以直接从表中读取并将数据添加到图表（example）。当然，这意味着您的asp.net页面已将数据拉入表中。

另一种方法是使用HighCharts .NET的新测试版（信息here）。这使用MVC。

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

使用asp.net进行高图动态绑定

1 个答案: