zoukankan      html  css  js  c++  java
  • 利用jschart制作图表信息

    这个使用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();
        };
    

    效果图例

  • 相关阅读:
    Android_AyscnTask
    Android_handler
    Android_网络操作
    Android_网络基础
    Android_Fragment
    Android_activity 生命周期
    Android-Dialog
    android_menu
    Android-约束布局
    andorid_相对布局小练习
  • 原文地址:https://www.cnblogs.com/myparadiseworld/p/5909304.html
Copyright © 2011-2022 走看看