利用jschart制作图表信息

Posted 2020-08-10

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

Dictionary<string, object> result = new Dictionary<string, object>();
            List<Data> data = new List<Data>();
            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();
    };

效果图例