集成jQuery插件与数据库 [英] Integrate jQuery plugin with database
问题描述
本插件在静态值正常工作。但是，我想从数据库中使用的值。它是一个三维图。我曾尝试一切，但没有找到任何解决方案。这对我来说非常迫切。所以，做帮助。我曾尝试各种事情。搜索每一个可能的网站，可以解释这一点。但没有什么帮助作为尚未。甚至搜查有关的网站，这使得这类插件，但没有适当的文件在此找到。这将是GR8给其他开发者也谁想要的jQuery插件与数据库集成的。
This plugin is working fine for static values. But I want to use values from database. It is a 3d chart. I have tried everything, but couldn't find any solution. It's very urgent for me. So do help. I have tried various things. Searched every possible site that could explain this. But nothing has helped as of yet. Even searched about the website which makes these kind of plugins but no proper documentation was found on this. It will be of gr8 to other developers also who want to integrate any jQuery plugin with their database.
<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();
}
}
我已经编辑了code阿德里亚诺，但仍然不工作。它显示一个空白页。我不知道现在该做什么。也许你可以复制和放大器;我贴code在Visual Studio中，看看有什么不对。巴迪做帮助。我会给你我的赏金立竿见影。我只是想一个办法做到这一点。
I have edited the code adriano but still it's not working. It's showing a blank page. I don't know what to do now. Maybe you can copy & paste my code in your Visual Studio and see what's wrong. Buddy do help. I will give you my bounty straight away. I just want a way to do this
推荐答案
这很难解释，但在这里我们使用highcharts和加载数据从数据库中。
It's difficult to explain, but here we use highcharts and load data from database.
首先，你需要知道使用jQuery的调用发送到一个WebMethod使用JSON工作。如果您正在使用C＃将可能是这样的：
First of all, you need to know to use jquery to send a call to a webmethod working with JSON. If you are using c# probably will be something like this:
使用Javascript：
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 execulting方法的GetData传递任何参数。但是你可以传递参数。
In this example you are accessing the page Data.aspx execulting the Method GetData passing no parameters. But you can pass parameters.
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：
Now we know to get data! A important thing this data is your series data on chats, you send this 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＃来安装。
Your C# must return an array like this object, it's easy to mount with 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，大概是比较复杂的，这同样是只是一个解释如何从数据库中获取的数据，并插入到你绘制...请尝试把你的问题！
Off course you can return more the 1 value, your chart is 3D, probably more complex, again this is just an explanation how you can get the data from database and insert into you chart... Please try and put you problems!
这篇关于集成jQuery插件与数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
