javascript - 提供Chart.js图表​​的服务器端数据

我试图使用图表表示数据库中的某些数据。到目前为止，我还没有从数据库获取数据，我在通过Web方法提供数据时遇到了问题。我总是会收到404错误。我认为自己的网址中有问题，但我现在已经尝试了几个小时，无法解决该问题。

所以这是我的代码：

我的Index.asmx

namespace WebApplication1.Views.Home
{
    /// <summary>
    /// Summary description for Index
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 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 Index : System.Web.Services.WebService
    {
        [WebMethod]
        public static List<string> getChartData()
        {
            var returnData = new List<string>();

            var chartLabel = new StringBuilder();
            var chartData = new StringBuilder();
            chartLabel.Append("[");
            chartData.Append("[");

            for (int i = 0; i <= 10; i++)
            {


                chartLabel.Append(string.Format("'{0}',", new DateTime(2017, 7, i + 1).ToString()));
                chartData.Append(string.Format("{0},", (i * 2).ToString()));


            }

            chartData.Length--; //For removing ','
            chartData.Append("]");
            chartLabel.Length--; //For removing ','
            chartLabel.Append("]");

            returnData.Add(chartLabel.ToString());
            returnData.Add(chartData.ToString());
            return returnData;
        }
    }
}

我的Index.cshtml：

<form id="form1" runat="server">
    <div>
        <canvas id="Chart" width="600" height="500"></canvas>
    </div>
</form>
<script type="text/javascript">
$(function () {
            var ctx = document.getElementById("Chart").getContext('2d');
           $.ajax({

                url: "Index.asmx/getChartData",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success:function(response)
                {
                    var chartLabel = eval(response.d[0]); //Labels
                    var chartData = eval(response.d[1]); //Data
                    var barData = {
                        labels: chartLabel,
                        datasets: [
                            {
                                label: 'July Sales',
                                fillColor: "rgba(225,225,225,0.2)",
                                strokeColor: "Blue",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "Green",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(220,220,220,1)",
                                data: chartData
                            }
                        ]
                    };
                    var skillsChart = new Chart(ctx).Line(barData);
                }

            });
        }
        );
</script>

我发布了更多代码，只是因为我不知道我在哪里犯了错误。顺便说一句。这两个文件都在同一目录中。

这是我得到的错误：POST http://localhost:50337/Home/Index.asmx/getChartData 404（未找到）

有人知道如何解决吗？

最佳答案

与其返回JSON数据，不如尝试写入数据，并通过发送标头信息来告知浏览器数据：

HttpContext.Current.Response.ContentType = "application/json";
HttpContext.Current.Response.AddHeader("content-encoding", "utf8");
HttpContext.Current.Response.Write(returnData);