1

这个插件适用于静态值。但我想使用数据库中的值。这是一个 3d 图表。我已经尝试了一切，但找不到任何解决方案。所以帮忙吧。我尝试过各种各样的事情。搜索所有可以解释这一点的可能网站。但到目前为止还没有任何帮助。甚至搜索了制作此类插件的网站，但没有找到合适的文档。对于其他想要将任何 jQuery 插件与他们的数据库集成的开发人员来说，它将是 gr8 的。

<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，但它仍然无法正常工作。它显示一个空白页。我不知道现在该怎么办。

4

3 回答 3

1

如果您不想进行 ajax/json 调用，您可以按照我的方法动态编写 jquery 函数，然后通过启动脚本注册它。这是代码..

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") + " = &#x20B9;" + tot.ToString() + "',";
       jq += @"     axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%b&nbsp;%#d'
                    }
                },
                yaxis: {
                       min:0,
                    tickOptions: {
                        formatString: '&#x20B9;%.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);

希望这种肮脏的方法有所帮助。

于 2013-04-15T11:00:19.447 回答
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，执行不传递参数的方法 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 的，可能更复杂，这只是说明如何从数据库中获取数据并插入图表...请尝试提出问题！

于 2013-04-12T16:33:21.730 回答
0

您需要向服务器和服务器脚本发送另一个 AJAX 请求以从 DB 获取值并返回到您的 AJAX 方法。然后，您应该将此值传递到您的模块中以构建图表。

于 2013-04-08T05:33:25.283 回答