c# 绑定 morris.js 数据表代码不起作用

Question

我有一个代码可以将 morris.js 条形图绑定到数据表，但它不起作用.. 图表不显示。它应该是这样的：我有一个文本框可以通过关键字进行研究。该图应根据日期显示关键字在数据表中出现的次数，因此：横坐标 = 日期，纵坐标 = 关键字出现的次数。

我要显示的内容：

bar chart graph

所以我的代码不起作用（我使用 ajax 和 webmethod）：

js 代码：

<script src="morris.js"></script>
<script src="raphael-min.js"></script>
<script>
    $(document).ready(function () {
        var word = "{'word':'" + $("#tbSearch").val() + "'}";
        Morris.Bar
            ({
            element: 'bar-chart',
            data: $.parseJSON(Graph()) + word,
            xkey: 'value',
            ykeys: ['value'],
            labels: ["nombre d'occurence"],
            fillOpacity: 0.6,
            hideHover: 'auto',
            behaveLikeLine: true,
            resize: true,
            pointFillColors: ['#ffffff'],
            pointStrokeColors: ['black'],
            lineColors: ['yellow', 'pink'],
            resize: true

        });
    });

    function Graph() {
        var data = "";


        $.ajax({
            type: 'POST',
            url: 'WelcomDigitalHelpDesk.aspx/GetBarchartData',
            dataType: 'json',
            async: false,
            contentType: "application/json; charset=utf-8",
            data: {},
            success: function (result) {

                data = result.d;

            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });

        return data;
    }
</script>

c# 代码：

public class 图形数据 { public 字符串标签 { get;放; } public 字符串值{ get;放; } }

    public class GraphDataList
    {
        public List<GraphData> ListOfGraphData { get; set; }
    }

    [WebMethod]
    public static string GetBarchartData(string word)
    {

        string sqlQuery = @"SELECT DateDescription, COUNT(DescriptionDemande) FROM cfao_DigiHelp_index.DigiHelpData WHERE DescriptionDemande like '" + word + "' GROUP BY DateDescription";

        DataTable DTGraph = DataBaseCacheDigitalHepDeskConnection.SqlDataTable(sqlQuery, "DIGIHELP_DB");

        List<GraphData> dataList = new List<GraphData>();

        foreach (DataRow dtrow in DTGraph.Rows)
        {
            GraphData graphData = new GraphData();
            graphData.label = Convert.ToString(dtrow["DateDescription"].ToString());
            graphData.label = Convert.ToString(dtrow["DescriptionDemande"].ToString());

            dataList.Add(graphData);
        }

        //oper = null which means its first load.
        var jsonSerializer = new JavaScriptSerializer();
        string data = jsonSerializer.Serialize(dataList);
        return data;

    }

有人可以告诉我我做错了什么吗？

Answer 1

你在任何地方加载 jQuery 吗？是一个dependency。

此外，尝试在莫里斯之前加载拉斐尔。您的完整依赖项列表应如下所示：

<script src="jquery/1.9.0/jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="morris.js"></script>

Answer 2

我成功了，所以这是对我有用的答案：

代码 js :

function buildChartGraph(data) {
    $('#bar-chart').html('');

    Morris.Bar
        ({
            element: 'bar-chart',
            data: JSON.parse(data),
            xkey: 'label',
            ykeys: ['value'],
            labels: ['value'],
            fillOpacity: 0.6,
            hideHover: 'auto',
            behaveLikeLine: true,
            resize: true,
            pointFillColors: ['blue'],
            pointStrokeColors: ['darkblue'],
            lineColors: ['skyblue', 'orange'],
            resize: true

        });
}

function GetOccurence() {
    var data = "";


    $.ajax({
        type: "POST",

        contentType: "application/json; charset=utf-8",

        url: "WelcomDigitalHelpDesk.aspx/GetBarchartData",

        data: "{'word':'" + $("#tbSearch").val() + "'}",

        dataType: "json",

        success: function (result) {

            buildChartGraph(result.d);

        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });
}

C# 代码：

[WebMethod]
    public static string GetBarchartData(string word)
    {

    string sqlQuery = @"SELECT TOP 40 DateDescription, COUNT(DescriptionDemande) FROM TableName WHERE DescriptionDemande like '%" + word + "%' GROUP BY DateDescription";

    DataTable DTGraph = DataBaseCacheDigitalHepDeskConnection.SqlDataTable(sqlQuery, "DbName");

    List<GraphData> dataList = new List<GraphData>();

    foreach (DataRow dtrow in DTGraph.Rows)
    {
        GraphData graphData = new GraphData();

        graphData.value = Convert.ToString(dtrow[1].ToString());
        graphData.label = Convert.ToString(DateTime.Parse( dtrow[0].ToString()).ToShortDateString());

        dataList.Add(graphData);
    }


    var jsonSerializer = new JavaScriptSerializer();
    string data = jsonSerializer.Serialize(dataList);
    return data;

}



}

public class GraphData
{
    public string label { get; set; }
    public string value { get; set; }
}

public class GraphDataList
{
    public List<GraphData> ListOfGraphData { get; set; }
}

c# 绑定 morris.js 数据表代码不起作用

c# bind morris.js with datatable code not working

c#

ajax

jquery

morris.js