1

我正在尝试使用 JSON 创建一个浮点饼图。在静态数据中，它工作正常，但是当我想动态发送数据（使用 JSON）时，什么都没有显示。这是我的代码：

<script src="jquery-1.11.2.min.js"></script>
<script src="jquery.flot.js"></script>
<script src="jquery.flot.pie.js"></script>

....

$.ajax({
            url: 'PieChart.aspx/GetData',
            contentType: "application/json; charset=utf-8",
            type: "POST",
            dataType: 'json',
            success: function (data) {
                //alert("should be shown");
                $.plot($("#placeholder"), data, {
                    series: {
                        pie: {
                            show: true
                        }
                    },
                    legend: {
                        labelBoxBorderColor: "none"
                    }
                });
            },
            failure: function (response) {
                alert(response.d);
            }

        });

Asp.net server_side 中的代码：

 [System.Web.Services.WebMethod]
  public static string GetData()
    {
     //there are some other codes here, just to test. I've replaced them using this line. 
    return "[{ label: \"IE\", data: 19.5, color: \"#4572A7\" }, { label: \"Safari\", data: 4.5, color: \"#80699B\" }]";
    }

需要帮忙。谢谢

4

4 回答 4

0 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChartDemo.aspx.cs" Inherits="piecharts.ChartDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>



        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', { 'packages': ['corechart'] });


        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.

        function drawChart() {
            //alert($("#hdnJson").val());
            // Create the data table.

            var jsonObj = JSON.parse($("#hdnJson").val());
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Colour');
            data.addColumn('number', 'Total');
            data.addRows([
              [jsonObj[0].Colour, jsonObj[0].Total],
              [jsonObj[1].Colour, jsonObj[1].Total],
              [jsonObj[2].Colour, jsonObj[2].Total],
              [jsonObj[3].Colour, jsonObj[3].Total]

            ]);

            // Set chart options
            var options = {

                'width': 400,
                'height': 300,
                legend: {position: 'none'},
                'pieSliceText': 'value',
                tooltip: { text: 'value' },
                'is3D':true,
                //sliceVisibilityThreshold: 0,
                'slices': { 0: { color: 'Green' }, 1: { color: '#FFFF7F' }, 2: { color: 'silver' }, 3: { color: 'red' } }


            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
            chart.draw(data, options, { sliceVisibilityThreshold: 0 });
        }
        }
    </script>
</head>
于 2015-02-19T09:01:21.423 回答
0 
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace piecharts
{
    public partial class ChartDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            using (System.Data.OracleClient.OracleConnection con = new System.Data.OracleClient.OracleConnection("Data Source=(DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=10.11.22.11)(PORT=1111)))(CONNECT_DATA=(SERVICE_NAME=mohan)));User ID=kittu;Password=kittu"))
            {
                con.Open();
                System.Data.OracleClient.OracleCommand cmd = new System.Data.OracleClient.OracleCommand("select parameter,sum(weightage) as Total from projectweightage GROUP BY parameter", con);
                System.Data.OracleClient.OracleDataAdapter da = new System.Data.OracleClient.OracleDataAdapter(cmd);
                da.Fill(dt);
                con.Close();
            }
            HiddenField hdnField = new HiddenField();
            var jsonData=ChartJson(dt);
            hdnField.Value = jsonData;
            hdnField.ID = "hdnJson";
            form1.Controls.Add(hdnField);

        }
        private string ChartJson(DataTable dt)
        {
            List<ChartDetails> lstChartDetails = new List<ChartDetails>();
            foreach (DataRow dRows in dt.Rows)
            {
                ChartDetails chartdtls = new ChartDetails();
                chartdtls.Colour = Convert.ToString(dRows["Parameter"]);
                chartdtls.Total = Convert.ToInt32(dRows["Total"]);
                lstChartDetails.Add(chartdtls);
            }

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(lstChartDetails);

        }


    }
}
于 2015-02-19T08:54:38.273 回答
0 
*****Properties****

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace piecharts
{
    public class ChartDetails
    {
        public int Total { get; set; }
        public string Colour { get; set; }
    }
}
于 2015-02-19T09:06:05.730 回答
0 
<script type="text/javascript">
    //IBU1//
    $(function () {

        $.ajax({
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            url: '@Url.Action("Pie","Pie")',
            data: '{}',
            success: function (data) {

                var jsonObj = data;

                // Callback that creates and populates a data table,
                // instantiates the pie chart, passes in the data and
                // draws it.

                var data = new google.visualization.DataTable();

                data.addColumn('string', 'Parameter');
                data.addColumn('number', 'Total');

                data.addRows([
                ['Green', jsonObj[0].Green],
                ['Red', jsonObj[0].Red],
                ['Yellow', jsonObj[0].Yellow],
                ['Grey', jsonObj[0].Grey]

                ]);

                // Instantiate and draw our chart, passing in some options
                var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

                chart.draw(data,
                  {
                      'width': 400,
                      'height': 300,

                      legend: { position: 'none' },
                      'sliceVisibilityThreshold': 6 / 1000,
                      'pieSliceText': 'value',
                      tooltip: { text: 'value' },
                      'slices': { 0: { color: 'Green' }, 1: { color: 'red' }, 2: { color: 'Yellow' }, 3: { color: 'silver' } }
                  });
            },
            error: function () {
                alert("Error loading data! Please try again.");
            }

        });
    })

</script>
于 2015-02-04T15:29:14.833 回答