码迷,mamicode.com
首页 > Web开发 > 详细

利用jschart制作图表信息

时间:2016-09-26 16:07:15      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

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

效果图例

技术分享

利用jschart制作图表信息

标签:

原文地址:http://www.cnblogs.com/myparadiseworld/p/5909304.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!