C# 使用asp.net的highchart动态绑定
我正在尝试动态绑定数据，以便比较一个月数据和两个位置的折线图 为此，我创建了下面的代码，它运行良好C# 使用asp.net的highchart动态绑定,c#,jquery,asp.net,highcharts,C#,Jquery,Asp.net,Highcharts,我正在尝试动态绑定数据，以便比较一个月数据和两个位置的折线图 为此，我创建了下面的代码，它运行良好 <%@ 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
<%@ 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>
月表
$（函数（）{
$（“#容器”）。高图({
图表：{
类型：“行”
},
标题：{
文本：“月平均明细”
},
副标题:{
文本：“来源：Google.com”
},
xAxis：{
类别：['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']
},
亚克斯：{
标题：{
文本：“单位”
}
},
打印选项：{
行：{
数据标签：{
已启用：false//启用计数
},
enableMouseTracking:false//鼠标悬停时启用工具提示
}
},
系列：[{
名称：'海得拉巴-位置'，
数据：[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]
}, {
名称：'钦奈-地点'，
数据：[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]
}]
});
});
StringBuilderscriptliteraldivpage.ClientScript.RegisterClientScriptBlock>将我们创建的客户端js脚本（使用StringBuilder
）注册到页面（…）表中绘制的数据，您可以直接从表中读取数据并将数据添加到图表（）。当然，这意味着您的asp.net页面已经将数据拉入表中
另一种方法是使用HighCharts.NET（info）的新beta版，它使用MVC
您也可以使用HighCharts的其他.NET实现，但我发现没有一个能令人满意，因此我们编写了自己的实现。对于我们（使用VB.NET，但总体方法相同），我们有一个UserControl，它根据UserControl负责的数据调用获取图表javascript（来自webservice、ajax调用或老式DTO）。它调用我们编写的库，该库接受数据集（单系列或多系列）、大小选项以及我们希望用于此特定图表的其他选项（如图表类型、标题、源页脚等）。从这些选项中，我们使用StringBuilder
构建HighChartsscript
标记项。然后，我们使用literal
创建div
以保存图表。然后，我们使用page.ClientScript.RegisterClientScriptBlock>将我们创建的客户端js脚本（使用StringBuilder
）注册到页面（…）
这其中很多都取决于您的具体需求，我不想太详细，因为我们的系统中有很多您可能/可能不需要做的事情
另一种更“通用”的方法是，如果您的页面中已经有要在HTML表中绘制的数据，您可以直接从表中读取数据并将数据添加到图表（）。当然，这意味着您的asp.net页面已经将数据拉入表中
另一种方法是使用HighCharts.NET（info）的新beta版，它使用MVC
您也可以使用HighCharts的其他.NET实现，但我发现没有一个实现是令人满意的，所以我们编写了自己的