这个使用jschart做的，但是出现一个问题，就是提示点由于滚动条的滑动会进行绝对定位，导致提示点于需要提示的地方不重合，暂时未找到解决办法，蛋疼。。。。。。

Dictionary
     
       result = new Dictionary
      
       ();            List
        data = new List();            result.Add("access", getData_exec(all_amount));            result.Add("pay", GetList(GetTable(sql_pay), OptionType, day));            result.Add("received", GetList(GetTable(sql_received), OptionType, day));            result.Add("payable", GetList(GetTable(sql_payable), OptionType, day));            result.Add("receivable", GetList(GetTable(sql_receivable), OptionType, day));            JavaScriptSerializer jss = new JavaScriptSerializer();            string str = jss.Serialize(result);            HttpContext.Current.Response.Clear();            HttpContext.Current.Response.Write(str);            HttpContext.Current.Response.End();
      
     

function PaintChart()    {        if($("#startTime").val()>$("#endTime").val()||($("#startTime").val()>getNowFormatDate("month")&&$("#startTime").val()>getNowFormatDate()))        {            layer.msg("请输入正确时间");            return;        }        var BeginTime =$("#startTime").val();        var EndTime = $("#endTime").val();        var OptionType=$('input[name="optiontype"]:checked').val();        BeginTime="2016-01-01";        $.ajax({            url: '/WebUI_Index.aspx?method=GetData',            type: 'POST',            data: { BeginTime: BeginTime, EndTime: EndTime,OptionType:OptionType},            dataType: "json",            cache: false,            async: false,            success: function (obj) {                 var myArray0 = new Array();                var myArray1 = new Array();                var myArray2 = new Array();                var myArray3 = new Array();                $(obj.pay).each(function () {                    myArray0.push([this.time, this.amount]);                });                $(obj.received).each(function () {                    myArray1.push([this.time, this.amount]);                });                $(obj.payable).each(function () {                    myArray2.push([this.time, this.amount]);                });                $(obj.receivable).each(function () {                    myArray3.push([this.time, this.amount]);                });                linePaint("统计图形表", myArray0, myArray1, myArray2, myArray3, "访问", "登陆", "下载", "注册", "chartContainer");            },            error: function (jqXHR, textStatus, errorThrown) {                layer.msg(jqXHR.responseText);            }        });    }        //线状，对比    function linePaint(title, myArray0, myArray1, myArray2, myArray3, legend0, legend1, legend2, legend3, divId) {        var lineChart = new JSChart(divId, 'Line');        lineChart.setDataArray(myArray0, legend0);        lineChart.setDataArray(myArray1, legend1);        lineChart.setDataArray(myArray2, legend2);        lineChart.setDataArray(myArray3, legend3);        lineChart.setLineColor('#FF0000', legend0); //注：第一条线的颜色         lineChart.setLineColor('#00FF00', legend1); //注：第二条线的颜色          lineChart.setLineColor('#0000ff', legend2); //注：第3条线的颜色        lineChart.setLineColor('#ff6a00', legend3); //注：第4条线的颜色        lineChart.setSize(720, 360); //注：宽度500,、高度：300         lineChart.setTitle(title); //图表标题          lineChart.setTitleFontSize(15);//图表标题大小           lineChart.setLegendShow(true); //显示图例         lineChart.setLegendPosition('right top');  //图例显示位置(可以是相对位置或坐标)           lineChart.setAxisNameX("时间");        lineChart.setAxisNameColorX("#ff0000");        lineChart.setAxisNameColorY("#ff0000");        lineChart.setAxisNameY("次数");        lineChart.setGraphExtend(true);        lineChart.setTextPaddingLeft(10)        lineChart.setIntervalStartY(-100);        lineChart.setAxisPaddingLeft(50);        lineChart.setAxisPaddingRight(50);        lineChart.setTooltipOpacity(0);        lineChart.setTooltipFontSize(18);        lineChart.setAxisPaddingBottom(40);        lineChart.setTextPaddingBottom(10);        lineChart.setIntervalStartY(0);        lineChart.setFlagRadius(4);        lineChart.setTooltipBorder("1px solid #000");        lineChart.setAxisColor('#8420CA');        lineChart.setAxisValuesColor('#949494');        lineChart.setAxisPaddingLeft(100);        lineChart.setAxisPaddingRight(120);        lineChart.setAxisPaddingTop(50);        lineChart.setAxisPaddingBottom(40);        lineChart.setAxisValuesDecimals(3);        lineChart.setAxisValuesNumberX(10);        lineChart.setShowXValues(false);        lineChart.setGridColor('#C5A2DE');        lineChart.setLineWidth(2);        lineChart.setFlagColor('#9D12FD');        lineChart.setFlagRadius(4);        for (var i = 0; i < myArray0.length; i++) {            lineChart.setTooltip([myArray0[i][0], legend0 + " " + myArray0[i][1], legend0]);            lineChart.setTooltip([myArray1[i][0], legend1 + " " + myArray1[i][1], legend1]);            lineChart.setTooltip([myArray2[i][0], legend2 + " " + myArray2[i][1], legend2]);            lineChart.setTooltip([myArray3[i][0], legend3 + " " + myArray3[i][1], legend3]);        }        lineChart.draw();    };

效果图例