Question

我有一个代码将morris.js条形图绑定到datatable但它不起作用..图形不显示。它可能是这样的：我有一个文本框可以通过关键词进行研究。该图表应显示关键字在数据表中出现的时间，具体取决于日期：abscissa = date和ordinate =关键字出现的次数。

我想要展示的内容：

bar chart graph

所以这里是我的代码无法正常工作（即使用ajax和webmethod）：

js code：

<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＃code：

公共类GraphData { 公共字符串标签{get;组; } 公共字符串值{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。

另外，尝试在Morris之前加载Raphael。您的完整依赖项列表应如下所示：

<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＃bind morris.js，数据表代码不起作用

2 个答案: