此插件适用于静态值。但我想使用数据库中的值。这是一张三维图表。我已经尝试了一切，但找不到任何解决方案。所以要帮忙。我尝试过各种各样的事情。搜索了可以解释这一点的每个可能的网站。但到目前为止还没有任何帮助。甚至搜索了制作这类插件但没有找到适当文档的网站。对于想要将任何jQuery插件与他们的数据库集成的其他开发人员来说，这将是一个问题。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript">
var mysuperdata= null;
jQuery.ajax({
url: url: "Default2.aspx/GetData",
contentType: "application/json; charset=utf-8",
data: { "param1": p1, "inicialDate": inicialDate, "finalDate": finalDate },
dataType: "jsonp",
success: function (d) { mysuperdata = d }
});
</script>
<script
type="text/javascript"
src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market
shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}:
<b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name +
'</b>: ' + this.percentage + ' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: mysuperdata
}]
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height:
400px; margin: 0 auto"></div>
</body>
</html> using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, XmlSerializeString = false)]
public static Array GetData()
{
return new Dictionary<string, double>()
{
{ "Firefox", 45 },
{ "IE", 24.8 },
{ "Chrome", 12.8 },
{ "Safari", 8.5 },
{ "Opera", 5.2 },
{ "Outros", 3.7 },
}.ToArray();
}
}
我已经编辑了代码adriano，但它仍然没有用。它显示一个空白页面。我现在不知道该怎么办。
答案 0 :(得分：1)
很难解释，但在这里我们使用highcharts并从数据库加载数据。
首先，您需要知道使用jquery向使用JSON的web方法发送调用。如果你正在使用c＃，可能会是这样的：
使用Javascript：
var mysuperdata= null;
jQuery.ajax({
url: url: "Data.aspx/GetData",
contentType: "application/json; charset=utf-8",
data: { },
dataType: "jsonp",
success: function (d) { mysuperdata = d }
});
在此示例中，您正在访问Data.aspx页面，从而导致Method GetData不传递任何参数。但是你可以传递参数。
C＃：
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, XmlSerializeString = false)]
public static Array GetData()
{
return new Dictionary<string, double>()
{
{ "Firefox", 45 },
{ "IE", 24.8 },
{ "Chrome", 12.8 },
{ "Safari", 8.5 },
{ "Opera", 5.2 },
{ "Outros", 3.7 },
}.ToArray();
}
现在我们知道了获取数据！这个数据重要的是你的聊天系列数据，你发送这个Json：
[
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
你的C＃必须返回一个像这个对象一样的数组，它很容易用C＃挂载。
最后你有了你的图表：
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market
shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}:
<b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name +
'</b>: ' + this.percentage + ' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: mysuperdata
}]
});
});
});
当然你可以返回更多的1值，你的图表是3D，可能更复杂，这只是一个解释，你如何从数据库中获取数据并插入你的图表...请尝试给你解决问题！
答案 1 :(得分：1)
如果您不想进行ajax / json调用，可以按照我的方法动态编写jquery函数，然后通过startupscript注册它。这是代码..
void loadchart()
{
DateTime strat = DateTime.Parse(DropDownList1.SelectedValue);
int day = strat.Day;
int tosub = day - 1;
strat = strat.AddDays((0 - tosub));
DateTime edate = strat.AddMonths(1);
edate = edate.AddDays(-1);
double tot = 0;
string jq = "<script type=\"text/javascript\"> $(document).ready(function () { var line1 = [";
while (strat <= edate)
{
string x = strat.ToString("dd/MMM/yy");
double y = getregularorderamount(strat);
tot += y;
jq += "['"+x+"', "+y.ToString()+"],";
strat = strat.AddDays(1);
}
jq = jq.Substring(0, jq.Length - 1);
jq += @"];
var plot1 = $.jqplot('chart1', [line1], {
animate: true,";
jq += "title: 'Total Order Amount For The Month Of - " + DateTime.Parse(DropDownList1.SelectedValue).ToString("MMMM-yyyy") + " = ₹" + tot.ToString() + "',";
jq += @" axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b %#d'
}
},
yaxis: {
min:0,
tickOptions: {
formatString: '₹%.0f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5,
formatString: 'On date: %s, Total sale amount: %s'
},
cursor: {
show: false
}
});
});";
jq+="</script>";
ScriptManager.RegisterStartupScript(this, this.GetType(), "bgh", jq, false);
希望这种肮脏的方法有所帮助。
答案 2 :(得分：0)
您需要向服务器和服务器脚本发送另一个AJAX请求以从DB获取值并返回到您的AJAX方法。然后你应该将这些值传递给你的模块来构建图表。