高图动态绑定问题 [英] highchart dynamic binding problem

查看：54
本文介绍了高图动态绑定问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

大家好，



我正在尝试使用highcharts获取条形图比较图表的动态数据，但它对我不起作用。



当我绑定静态时，它的工作方式与下面的代码类似。





Hi All,

I'm trying to fetch dynamic data for bar graph comparison charts using highcharts, but it's not working for me.

When I'm binding static it's working like below code.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Details.aspx.cs"

    Inherits="Details" %>


<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <title>Daily Picked Details</title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
    
        .txtcolor
        {
            background-color: white;
            width: 80px;
            font-weight: 600;
            font-family: Open Sans;
            font-size: 20px;
            border-color: Gray;
            border-width: 2px;
        }
    
    <script type="text/javascript">

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "HighchartService.asmx/Daily",
                data: "{'loc1':'" + 1 + "','loc2':'" + 2 + "'}",
                dataType: "json",
                success: function (Result) {
                    Result = Result.d;
                    var data = new Array(); var data1 =new Array(); 

                    var serie = new Array(Result[0].strServices_1);
                    var series2 = new Array(2, 5, 6, 2, 1, 5, 3, 4, 7, 2, 2, 3, 4);
                        data.push(series2);

                    var serie = new Array(Result[0].strServices_2);
                    var series = new Array(2, 5, 6, 2, 1, 5, 3, 4, 7, 2, 2, 3, 4);
                        data1.push(series);
 
                    DreawChart(data,data1);
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });
        });
        function DreawChart(series,series1) {

            var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            var d = new Date();

            $('#container').highcharts({

                chart: {
                    renderTo: 'container1',
                    type: 'column'
                },
                //                legend: {
                //                    itemStyle: {
                //                        fontSize: '30px',
                //                        fontWeight: '900'
                //                    }
                //                },

                title: {
                    text: 'Order\'s Picked Status'
                },

                xAxis: {
                    categories: ['UPS - GROUND', 'UPS - NEXT DAY AIR', 'UPS - 2ND DAY AIR', 'UPS - 3 DAY SELECT', 'UPS - EXPEDITED','UPS - EXPRESS','UPS - SAVER','UPS - STANDARD','FEDEX',
                    'USPS','OWN LOG.','CUST. PICKUP','OTHERS']
                },

                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: 'Number of fruits'
                    }
                },

                tooltip: {
                    formatter: function () {
                        return '' + this.x + ''+
                    'Total: ' + this.point.stackTotal;
//                    return '' + this.x + '' +
//                    this.series.name + ': ' + this.y + '' +
//                    'Total: ' + this.point.stackTotal;
                    }
                },

                plotOptions: {
                    column: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        stacking: 'normal',
                        dataLabels: {
                            rotation: 270,
                            //enabled: true count enabled
                           
                        },
                    }
                },

                series: [{
                    name: '1 - Services',
                    data: series[0],
                    stack: '1'
                }, {
                    name: '2 - Services',
                    data: series1[0],
                    stack: '2'
                }]
            });

        }

    </script>
</head>
<body>
    <form id="form1"  runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
    </div>
    </form>
</body>
</html>





当我绑定动态时它不像下面的代码那样工作。





When I'm binding dynamic it's not working like below code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Details.aspx.cs"

    Inherits="Details" %>

<!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>Daily Picked Details</title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
    <style type="text/css">
        .txtcolor
        {
            background-color: white;
            width: 80px;
            font-weight: 600;
            font-family: Open Sans;
            font-size: 20px;
            border-color: Gray;
            border-width: 2px;
        }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "HighchartService.asmx/Daily",
                data: "{'loc1':'" + 1 + "','loc2':'" + 2 + "'}",
                dataType: "json",
                success: function (Result) {
                    Result = Result.d;
                    var data = new Array(); var data1 =new Array(); 

                    var serie = new Array(Result[0].strServices_1);
                    //var series2 = new Array(2, 5, 6, 2, 1, 5, 3, 4, 7, 2, 2, 3, 4);
                        data.push(series2);

                    var serie = new Array(Result[0].strServices_2);
                    //var series = new Array(2, 5, 6, 2, 1, 5, 3, 4, 7, 2, 2, 3, 4);
                        data1.push(series);
 
                    DreawChart(data,data1);
                },
                error: function (xhr, status, error) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });
        });
        function DreawChart(series,series1) {

            var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            var d = new Date();

            $('#container').highcharts({

                chart: {
                    renderTo: 'container1',
                    type: 'column'
                },
                //                legend: {
                //                    itemStyle: {
                //                        fontSize: '30px',
                //                        fontWeight: '900'
                //                    }
                //                },

                title: {
                    text: 'Order\'s Picked Status'
                },

                xAxis: {
                    categories: ['UPS - GROUND', 'UPS - NEXT DAY AIR', 'UPS - 2ND DAY AIR', 'UPS - 3 DAY SELECT', 'UPS - EXPEDITED','UPS - EXPRESS','UPS - SAVER','UPS - STANDARD','FEDEX',
                    'USPS','OWN LOG.','CUST. PICKUP','OTHERS']
                },

                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: 'Number of fruits'
                    }
                },

                tooltip: {
                    formatter: function () {
                        return '' + this.x + '<br/>'+
                    'Total: ' + this.point.stackTotal;
//                    return '' + this.x + '<br/>' +
//                    this.series.name + ': ' + this.y + '<br/>' +
//                    'Total: ' + this.point.stackTotal;
                    }
                },

                plotOptions: {
                    column: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        stacking: 'normal',
                        dataLabels: {
                            rotation: 270,
                            //enabled: true count enabled
                           
                        },
                    }
                },

                series: [{
                    name: '1 - Services',
                    data: series[0],
                    stack: '1'
                }, {
                    name: '2 - Services',
                    data: series1[0],
                    stack: '2'
                }]
            });

        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
    </div>
    </form>
</body>
</html>





Webservice.asmx





Webservice.asmx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using CWDB;
using Highchart.Core;
using Highchart.Core.PlotOptions;
using Highchart.Core.Data.Chart;
using System.Data;
using System.Web.Services.Protocols;

/// <summary>
/// Summary description for HighchartService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class HighchartService : System.Web.Services.WebService
{

public HighchartService()
    {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

 [WebMethod(EnableSession = true)]
    public List<Tuple<Highchart_1, Highchart_2>> Daily(string loc1, string loc2)
    {

        //DailyPickStatus(loc1, loc2);
        List<Tuple<Highchart_1, Highchart_2>> StatusInfo = new List<Tuple<Highchart_1, Highchart_2>>();

        Highchart_1 obj_1 = new Highchart_1();
        obj_1.strServices_1 = new int[] { 5, 3, 4, 7, 2, 5, 3, 4, 7, 2, 3, 4, 7 };

        Highchart_2 obj_2 = new Highchart_2();
        obj_2.strServices_2 = new int[] { 2, 5, 6, 2, 1, 5, 3, 4, 7, 2, 2, 3, 4 };

        StatusInfo.Add(new Tuple<Highchart_1, Highchart_2>(obj_1, obj_2));

        return StatusInfo;
    }
}




public class Highchart_1
   {

       public int[] strServices_1 = new int[] { };

   }


   public class Highchart_2
   {

       public int[] strServices_2 = new int[] { };

   }





Could you please suggest me where I went wrong?



Thanks in advance.



Could you please suggest me where I went wrong?

Thanks in advance.

推荐答案

(document).ready(function () {
(document).ready(function () {


.ajax({
type: \"POST\",
contentType: \"application/json; charset=utf-8\",
url: \"HighchartService.asmx/Daily\",
data: \"{'loc1':'\" + 1 + \"','loc2':'\" + 2 + \"'}\",
dataType: \"json\",
success: function (Result) {
Result = Result.d;
var data = new Array(); var data1 =new Array();

var serie = new Array(Result[0].strServices_1);
var series2 = new Array(2, 5, 6, 2, 1, 5, 3, 4, 7, 2, 2, 3, 4);
data.push(series2);

var serie = new Array(Result[0].strServices_2);
var series = new Array(2, 5, 6, 2, 1, 5, 3, 4, 7, 2, 2, 3, 4);
data1.push(series);

DreawChart(data,data1);
},
error: function (xhr, status, error) {
var err = eval(\"(\" + xhr.responseText + \")\");
alert(err.Message);
}
}）;
}）;
function DreawChart(series,series1) {

var monthNames = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];

var d = new Date();
.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "HighchartService.asmx/Daily", data: "{'loc1':'" + 1 + "','loc2':'" + 2 + "'}", dataType: "json", success: function (Result) { Result = Result.d; var data = new Array(); var data1 =new Array(); var serie = new Array(Result[0].strServices_1); var series2 = new Array(2, 5, 6, 2, 1, 5, 3, 4, 7, 2, 2, 3, 4); data.push(series2); var serie = new Array(Result[0].strServices_2); var series = new Array(2, 5, 6, 2, 1, 5, 3, 4, 7, 2, 2, 3, 4); data1.push(series); DreawChart(data,data1); }, error: function (xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); alert(err.Message); } }); }); function DreawChart(series,series1) { var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var d = new Date();


('#container').highcharts({

chart: {
renderTo: 'container1',
type: 'column'
},
// legend: {
// itemStyle: {
// fontSize: '30px',
// fontWeight: '900'
// }
// },

title: {
text: 'Order\'s Picked Status'
},

xAxis: {
categories: ['UPS - GROUND', 'UPS - NEXT DAY AIR', 'UPS - 2ND DAY AIR', 'UPS - 3 DAY SELECT', 'UPS - EXPEDITED','UPS - EXPRESS','UPS - SAVER','UPS - STANDARD','FEDEX',
'USPS','OWN LOG.','CUST. PICKUP','OTHERS']
},

yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},

tooltip: {
formatter: function () {
return '' + this.x + ''+
'Total: ' + this.point.stackTotal;
// return '' + this.x + '' +
// this.series.name + ': ' + this.y + '' +
// 'Total: ' + this.point.stackTotal;
}
},

plotOptions: {
column: {
allowPointSelect: true,
cursor: 'pointer',
stacking: 'normal',
dataLabels: {
rotation: 270,
//enabled: true count enabled

},
}
},

series: [{
name: '1 - Services',
data: series[0],
stack: '1'
}, {
name: '2 - Services',
data: series1[0],
stack: '2'
}]
});

}

</script>
</head>
<body>
<form id=\"form1\" runat=\"server\">
<asp :ScriptManager ID=\"ScriptManager1\" runat=\"server\">
</asp:ScriptManager>
<div id=\"container\" style=\"min-width: 310px;身高：400px; margin: 0 auto\">
</div>
</form>
</body>
</html>
('#container').highcharts({ chart: { renderTo: 'container1', type: 'column' }, // legend: { // itemStyle: { // fontSize: '30px', // fontWeight: '900' // } // }, title: { text: 'Order\'s Picked Status' }, xAxis: { categories: ['UPS - GROUND', 'UPS - NEXT DAY AIR', 'UPS - 2ND DAY AIR', 'UPS - 3 DAY SELECT', 'UPS - EXPEDITED','UPS - EXPRESS','UPS - SAVER','UPS - STANDARD','FEDEX', 'USPS','OWN LOG.','CUST. PICKUP','OTHERS'] }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Number of fruits' } }, tooltip: { formatter: function () { return '' + this.x + ''+ 'Total: ' + this.point.stackTotal; // return '' + this.x + '' + // this.series.name + ': ' + this.y + '' + // 'Total: ' + this.point.stackTotal; } }, plotOptions: { column: { allowPointSelect: true, cursor: 'pointer', stacking: 'normal', dataLabels: { rotation: 270, //enabled: true count enabled }, } }, series: [{ name: '1 - Services', data: series[0], stack: '1' }, { name: '2 - Services', data: series1[0], stack: '2' }] }); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div> </form> </body> </html>





When I’m binding dynamic it’s not working like below code.





When I'm binding dynamic it's not working like below code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Details.aspx.cs"

    Inherits="Details" %>

<!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>Daily Picked Details</title>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
    <style type="text/css">
        .txtcolor
        {
            background-color: white;
            width: 80px;
            font-weight: 600;
            font-family: Open Sans;
            font-size: 20px;
            border-color: Gray;
            border-width: 2px;
        }
    </style>
    <script type="text/javascript">


这篇关于高图动态绑定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆