为 Chart.js 图表提供服务器端数据答案

【问题标题】：Providing server side data for Chart.js charts为 Chart.js 图表提供服务器端数据
【发布时间】：2017-06-21 18:45:28
【问题描述】：

我正在尝试使用图表来表示数据库中的一些数据。到目前为止，我没有从数据库中获取数据，我无法通过 Web 方法提供数据。我总是收到 404 错误。我认为我的网址有问题，但我现在尝试了几个小时，无法弄清楚如何解决它。

这是我的代码：

我的索引.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 (Not Found)

有人知道怎么解决吗？

【问题讨论】：

你还在寻找答案吗？我遇到了确切的问题并解决了它，不同的是我的不在 AJAX 中，我将图表传递给 viewbag 并在 View 接收它。不知道对你有没有帮助！

标签： javascript c# json ajax chart.js

【解决方案1】：

不要返回 JSON 数据，而是尝试写入数据并通过发送标头信息告诉浏览器有关数据：

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

【讨论】：

【解决方案2】：

尝试从方法签名中删除“静态”关键字。

【讨论】：