chart.js應用

前端

須要引用Chart.bundle.min.js和jquery

<canvas id="myChart"></canvas>

<script>
    
    var _ID=<%=SupplierId%>;
   
    function Chart2(ID) {
        var data1;
        var _url = "../AjaxBll/MatchChart.ashx";
        $.ajax({
            type: "get",
            url: _url,
            dataType: "json",
            async: false,
            data: {
                "ID": ID,
            },
            success: function (data) {
                datachar = data;
            }
        });
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, datachar);
    }
    

    function Do(){
        Chart2(_ID);
    }

    Chart2(_ID);
</script>

後端

public string BindData(int ID,bool md)
    {
        whereSupplier = "SupplierId = " + ID.ToString();//匹配到的詢盤
        DataSet ds = DbHelperSQL.Query(WriteSql(SetDate(whereSupplier),md));
        DataTable tb= ds.Tables[0];
        where2 = "Msg_InceptDel = " + ID.ToString();//接收到的詢盤
        DataSet ds2 = DbHelperSQL.Query(WriteSql2(SetDate2(where2),md));
        DataTable tb2= ds2.Tables[0];

        #region 拼接JSON
        string date = "[";  //X軸.日期
        string num = "[";   //根據日期,匹配到的詢盤數量
        string num2 = "[";
        for (int i = 0; i <= tb.Rows.Count - 1; i++)
        {
            if (i != 0)
            {
                num += "," + tb.Rows[i]["Count"];
                date += "," + "\"" + tb.Rows[i]["dtime"] + "\"";
            }
            else
            {
                num += tb.Rows[i]["Count"];
                date += "\"" + tb.Rows[i]["dtime"] + "\"";
            }
        }
        for (int i = 0; i <= tb2.Rows.Count - 1; i++)
        {
            if (i != 0)
            {
                num2 += "," + tb2.Rows[i]["Count"];
            }
            else
            {
                num2 += tb2.Rows[i]["Count"];
            }
        }

        num += "]";
        date += "]";
        num2 += "]";

        #endregion

        return "{\"type\": \"line\",\"data\": {\"labels\": " + date + ",\"datasets\": [{\"label\":\"匹配 詢盤數量\",\"backgroundColor\": \"rgba(0, 0, 0, 0)\",\"borderColor\": \"rgba(75, 192, 192, 1)\",\"data\": " + num + "},{\"label\":\"收到的詢盤數量\",\"backgroundColor\": \"rgba(0, 0, 0, 0)\",\"borderColor\": \"rgba(255, 106, 106, 1)\",\"data\": " + num2 + "}]}}";
    }