利用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();    };

例

利用jschart製作圖表資訊