精华内容
下载资源
问答
  • Echarts折线如何补全断点以及如何隐藏断点的title  报表的时候,尤其是做图表的时候时常会碰到某一记录的值中缺少某个时间段(比如月份或季度)的值,导致图表显示残缺不全,for example:   如果照实...

                                                                 Echarts折线图如何补全断点以及如何隐藏断点的title

      做报表的时候,尤其是做图表的时候时常会碰到某一记录的值中缺少某个时间段(比如月份或季度)的值,导致图表显示残缺不全,for example:

            

    如果照实显示的话确实不太美观(除非贵公司确实需要特别准确的数据除外~),当然我们的客户是做信托的,算钱的系统和时常开会追KPI的时候看报表系统~;给领导写报告图表当然不能太另类~\(≧▽≦)/~,遂业务部门的同学要求我们尽可能在数据准确的情况下将图表做的更美观些些,...吾以为这个貌似难难滴欸。。。。,怎么办。。。。,研究来研究去,之后我们将报表做成了这样纸>>> 

            

        感觉挺好的,不知业务的妹纸是否满意(◡‿◡)

     且细看....细看,比如图中34个月与35个月是没有数据滴,哈哈,成功!!

    一下分享下我的思路:

            A>首先要取得所有部门的期限内的所有数据(当然这个过程你需要自己码代码获得一份完整的月份数据,要不然你怎么知道记录的断点位置呢,是不?)

            B>然~,整理你的数据,分层是必要的(如果数据库能按按部门分层月份,干嘛还要这么累啊(=@__@=))

            C>再~,两层遍历,等等干什么呢?-->这是要找出断点,并用统一的mark以标示

              (具体就是外层循环月份List,然后遍历所有的按部门归类的部门的月份找出此部门再哪个期限缺值)

            D>然~,看似以上已经找出了断点了,但试想下如果这些断点都是以‘—’补全,图还是会断啊~~~,怎么办;

               啊哈 so easy~ 将此断点补上前后两个值的平均值不就是一条直线啦,啦啦啦~

            E>啦啦啦,搞定\(^o^)/YES!   。。。。,浏览器打开页面~ (⊙﹏⊙)b 为什么为什么为什么还会显示title呢,

               这样会暴露程序猿的审美····,how? 官方API搞定....

     直接放代码可能让各位一头雾水,先给一份样例数据方便大家调试:

              

    下图是具体代码:

       注:echarts需要的数据样例如19~31注释部分

          37~40行获取limits数据,也就是x轴月份数据

          30~56行处理echarts分层数据(按部门划分)

          62~121行处理断点数据(将已经分层的里面的月份‘—’处理成前后值的平均数,使折线平滑)

              在这个之前需要对月份数据排序(从小到大排序),方法在最下面哈

          至于怎么将断点数据默认不显示,呢,答案很简单->请注意104行里面有个参数:“symbol:'none'”,这是官方API

            如对最后的图表的结构数据不懂,请看这里,看这里:http://echarts.baidu.com/echarts2/doc/example/line2.html

     

      1     function generateChart04() {
      2         var detailData = module.page["allFundStatD4s"].detaillist,
      3                legendData=[],//标题名称组
      4                limits=[],//期限
      5                myData={},//系列数据
      6                label={normal:{
      7                          show: true,
      8                          //position: 'top',
      9                          formatter: '{c}%'
     10                      }},
     11                seriesData=[];
     12         /**
     13          * A>构建系列结构数据
     14          * B>系列数据格式化和断点处理
     15          * C>图表显示样式处理
     16          */
     17         /*
     18          * 系列数据样例->
     19          * {"广州管理部":{
     20          *                             "期限":{1:0.173,6:0.863,9:0.777,12:0.66,36:0.039},#myLimits
     21          *                             "datas"{"广州管理部",type:"line",data:"(取)期限",
     22          *                                     label:{
     23          *                                              normal: {
     24                                                      show: true,
     25                                                      position: 'top',
     26                                                      formatter: '{c}%'
     27                                                  },
     28          *                                     }
     29          *                                     }
     30          *                         }
     31          * }
     32          */
     33         for(var i in detailData){
     34             //如果没有当前legend值,先初始化新建个;如果有,则更新当前期限值
     35             if(!myData[detailData[i].deptName]){
     36                 legendData.push(detailData[i].deptName);//放入图表标题数组中
     37                 if(limits.indexOf(detailData[i].realTimeLimit)==-1){//不存在
     38                 //if(!(limits.includes(detailData[i].realTimeLimit))){
     39                     limits.push(detailData[i].realTimeLimit);//放入期限数组中
     40                 }
     41                 myData[detailData[i].deptName]={};//声明
     42                 myData[detailData[i].deptName].myLimits={};//声明
     43                 myData[detailData[i].deptName].myLimits[detailData[i].realTimeLimit]=detailData[i].compositeCost;//放入期限
     44                 myData[detailData[i].deptName].datas={};
     45                 myData[detailData[i].deptName].datas.name=detailData[i].deptName;//当前legend放入名称
     46                 myData[detailData[i].deptName].datas.type="line";//当前legend放入类型
     47                 myData[detailData[i].deptName].datas.data=[];//先预留,取到所有系列数据后再填入数据
     48                 myData[detailData[i].deptName].datas.label=label;//线型预设值
     49             }else{
     50                 if(limits.indexOf(detailData[i].realTimeLimit)==-1){//不存在
     51                 //if(!(limits.includes(detailData[i].realTimeLimit))){
     52                     limits.push(detailData[i].realTimeLimit);//放入期限数组中
     53                 }
     54                 myData[detailData[i].deptName].myLimits[detailData[i].realTimeLimit]=detailData[i].compositeCost;//放入期限
     55             }
     56         }
     57         limits.sort();//从小到大排序
     58         /**
     59          * 遍历各个legend
     60          * 填补当前legend的节点数据为‘-’(以便后续对此节点补充平均值以使折线不出现明显的断点)
     61          */
     62         for(var j in myData){
     63             for(var k in limits){
     64                 if(myData[j].myLimits[limits[k]]){
     65                     myData[j].datas.data.push((myData[j].myLimits[limits[k]]*100).toFixed(2));
     66                     //myData[j].datas.data.push(myData[j].myLimits[limits[k]]==-1?0:(myData[j].myLimits[limits[k]]*100).toFixed(2));
     67                 }else{
     68                     myData[j].datas.data.push("-");
     69                 }
     70             }
     71 
     72             /**
     73              * 中间断点的补全中间断点
     74              */
     75             //[-,-,0,99,-,5,-,-];
     76             var before=0,after=0,cnode=0,idx=0;
     77             for(var m in myData[j].datas.data){
     78                 idx=idx+1;
     79                 if(myData[j].datas.data[m]=="-"){
     80                     //continue;//返回,进行下一次循环
     81                     if(m==0){
     82                         continue;
     83                     }else{
     84                         if(before>0){
     85                             cnode=cnode+1;
     86                             after=idx-1;
     87                         }
     88                     }
     89                     if(myData[j].datas.data[m]==(myData[j].datas.data.length-1)){
     90                         //初始化标记值
     91                         before=0;
     92                         after=0;
     93                         cnode=0;
     94                     }
     95                 }else{
     96                     if(cnode==0){
     97                         before=idx-1;//当前数据的下标的位置
     98                         after=idx-1;//当前数据下标的位置
     99                     }else{
    100                         after=idx-1;
    101                         cnode=cnode+1;
    102                         for(var n=1;n<cnode;n++){
    103                             //myData[j].datas.data[before+n]=(Number(myData[j].datas.data[before])+(myData[j].datas.data[after]-myData[j].datas.data[before])/cnode*n).toFixed(2);
    104                             myData[j].datas.data[before+n]={name:limits[before+n]+ "个月", symbol:'none', value:(Number(myData[j].datas.data[before])+(myData[j].datas.data[after]-myData[j].datas.data[before])/cnode*n).toFixed(2)};
    105                         }
    106                         cnode=0;
    107                         before=idx-1;
    108                     }
    109                     if(!(myData[j].datas.data[Number(m)+1])){//下一个节点是否存在
    110                         //存在"-":continue;
    111                         //存在number:
    112                         
    113                         //初始化标记值
    114                         before=0;
    115                         after=0;
    116                         cnode=0;
    117                     }
    118                 }
    119             }
    120             seriesData.push(myData[j].datas);
    121         }
    122         
    123         //X轴数据添加后缀
    124         for(var l in limits){
    125             limits[l]=limits[l]+"个月";
    126         }
    127         var myChart = echarts.init(document.getElementById('chart4'),'macarons');
    128         option = {
    129             title : {
    130                 text: '按部门期限分布',
    131                 x:'center',
    132                 y:'20px',
    133                 position:'top'
    134             },
    135             grid:{ 
    136                 y:'80px',            //直角坐标系内绘图网格左上角纵坐标,默认值60
    137                 x:'150px',
    138                 x2:'1%',
    139                 y2:'9%'
    140             },
    141             tooltip : {
    142                 trigger: 'axis',
    143                 formatter:function(params)
    144                 {
    145                     var relVal;
    146                     if (Array.isArray(params)) {    //显示各项数据时,params为数组
    147                         relVal = params[0].name;
    148                         for (var i = 0, l = params.length; i < l; i++) {
    149                             relVal += '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>'
    150                             relVal +=  params[i].seriesName + ' : ' + params[i].value+"%";
    151                         }
    152                     } else {    //显示平均数时,params为对象
    153                         relVal = params.name;
    154                         relVal += '<br/>' + params.seriesName + ' : ' + params.value+"%";
    155                     }
    156                     return relVal;
    157                 }
    158             
    159             },
    160             legend: {
    161                 data: legendData,//['资金成本','指导价'],
    162                 y:"center",//y:'20px;',
    163                 x:"left",
    164                 orient:"vertical"
    165             },
    166             toolbox: {
    167                 show : true,
    168                // orient:"vertical",
    169                 feature: {
    170                     dataView : {show: true, readOnly: false},
    171                     magicType : {show: true, type: ['line', 'bar']},
    172                     restore : {show: true},
    173                     saveAsImage : {show: true, backgroundColor:'transparent'}
    174                 }        
    175             },
    176             xAxis:{
    177                 /* type: 'category', */
    178                 position:'right',
    179                 data: limits,
    180                 boundaryGap: true,
    181                 axisLabel:{
    182                     interval:0,
    183                     rotate:45,//倾斜度 -90 至 90 默认为0
    184                 },
    185             },
    186             yAxis: {
    187                 type: 'value',
    188                 boundaryGap: [0.3, 0.3],
    189                 scale: true,
    190                 axisLabel: {
    191                     //formatter: '{value}%'
    192                     formatter: function (value, index) {
    193                         if(value.toString().length>5){
    194                               return Number(value.toFixed(5))+"%";    
    195                         }else{
    196                             return value+"%";
    197                         }
    198                               
    199                      }
    200                 }
    201             },            
    202             series :seriesData,
    203         };
    204         myChart.setOption(option);
    205     }

     

    1     //数组按按数字从小到大排序
    2     function (val, nextVal) {
    3             return val-nextVal;
    4     }

     

            ....=========啦啦啦啦~啦啦啦~( ̄▽ ̄~)(~ ̄▽ ̄)~=========....

     

    funnyzpc@gmail.com
    展开全文
  • ThinkPHP5.1+echarts实现折线图表

    千次阅读 2019-05-27 20:20:18
    问题解决 tp5.1视图赋值后怎么在js中调用 解决思路: js部分,创建一个函数,给他赋值,tp框架的引擎是需要使用{}调用,但是直接调用的...我的办法比较笨,因为第一次做图表 > $atime=json_encode($atime,true);/...
    问题解决
    1. tp5.1视图赋值后怎么在js中调用
    解决思路:
    js部分,创建一个函数,给他赋值,tp框架的引擎是需要使用{}调用,但是直接调用的话
    会发现不能使用在js里面,所以需要给它的外边套上一个双引号
    var arr="{$atime}";
    
    1. tp5.1的控制器部分该如何操作
    我的办法比较笨,因为第一次做图表
    > $atime=json_encode($atime,true);//第一步,将查出来的数据转换为json格式
    > $atime=str_replace('"', '', $atime);//第二步,如果含有双引号,去掉双引号,如果不去除,子啊js调用时会出现转义的特殊字符
    > $atime=str_replace('[', '', $atime);
    $atime=str_replace(']', '', $atime);//第三步,去掉左右的方括号
    //第四步,直接输出就可以了
    
    1. js将字符串转换为数组
     atime=atime.split(",");
    
    代码部分

    效果图
    在这里插入图片描述
    控制器代码:

    $time=strtotime(date('Y-m-d'));
    $time=$time-24*3600*6;
    $avg=array();
    $atime=array();
    for($i=0;$i<7;$i++){
          $t=date('Y-m-d',$time);
          $atime[]=$t;
          $avg[]=Db::name('avg')->whereBetweenTime('time', $t)->count();
          $time=$time+24*3600;
    }
    $atime=json_encode($atime,true);
    $atime=str_replace('"', '', $atime);
    $atime=str_replace('[', '', $atime);
    $atime=str_replace(']', '', $atime);
    $avg=json_encode($avg,true);
    $avg=str_replace('[', '', $avg);
    $avg=str_replace(']', '', $avg);
    $this->assign('avg',$avg);
    $this->assign('atime',$atime);
    

    html部分

    <fieldset class="layui-elem-field" style="text-align: center;">
         <p style="font-size:24px;">近一周访问人数</p>
         <div id="container" style="height: 450px;width: 100%;"></div>
    </fieldset>
    

    js部分

     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
     <script type="text/javascript">
        var myChart = echarts.init(dom);
        var app = {};
        var atime="{$atime}";
        var avg="{$avg}";
        atime=atime.split(",");
        avg=avg.split(",");
        option = null;
        option = {
            xAxis: {
                type: 'category',
                data: atime
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: avg,
                type: 'line'
            }]
        };
        
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
    
    展开全文
  • 如何画Flot折线

    千次阅读 2016-05-05 14:43:25
    折线图是最常被使用的图形, 也是最容易绘制的图表, 它可以显示时间与趋势的走向, 将各项数据图表化, 让人可以对这些数字与时间的相对关系一目了然, 因为这是Flot教学里第一个图表, 我们会完整的呈现所有细节及过程....
    折线图是最常被使用的图形, 也是最容易绘制的图表, 它可以显示时间与趋势的走向, 将各项数据图表化, 让人可以对这些数字与时间的相对关系一目了然, 因为这是Flot教学里第一个图表, 我们会完整的呈现所有细节及过程. 本章里以2012年的黄金价格走势做为范例, 我们将会以每月黄金的价格以及变动率做为数据源 

    制作折线图流程

    本章以下图折线图为范例

    加入所需要的Flot档案

    将绘制折线图所会用到的档案加到<head>里, 第一个最重要的就是jQuery.js需要放在第一位, 再来就是Flot主要的档案jquery.flot.js, 接下来因为我们绘制的是时间数据格式的图表, 所以也需要把jquery.flot.time.js加进来 

    最后的2个档案和jquery.flot.axislabels.js皆是Flot的插件, Flot预设的数据点(data point)符号是圆型(circle), 因为我们有改变数据点符号, 所以需要加入jquery.flot.symbol.js, 另外, Flot本身并不支持轴标签的设置, 所以需要透过加入jquery.flot.axislabels.js插件来达成轴标签的设置. 

    以下程序代码就是此范例所会用到的全部档案
        
            <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>       
             <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->    
            <script type="text/javascript" src="/js/flot/jquery.flot.js"></script>
            <script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>    
            <script type="text/javascript" src="/js/flot/jquery.flot.symbol.js"></script>
            <script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
            

    HTML5 canvas支援

    如果你是使用Internet Explorer, 且版本为8以下的, 浏览有用Flot绘制图表的网页可能无法正常观看, 因为这些浏览器不支持HTML5 canvas标签, 不过别担心, 只要加入ExplorerCanvas插件(excanvas.min.js)就可以让Internet Explorer也能正常显示Flot图表. 档案可以到此下载.

    加入定位点

    准备好所需要的档案后, 接下来就是决定Flot要绘图的位置, 你可以自行决定Flot要在那里出现, 只要在<body>加上下面的<div>标签, 并给一个id, 后面要绘制时会用到此id. 另一个比较重要的是, 你必须设置定位点的长度和宽度, 如果没有设置就有可能发生Uncaught Invalid dimensions for plot, width = 0, height = 0的script错误.
       
            <div id="flot-placeholder" style="width:300px;height:150px"></div>
            

    准备折线图所需资料

    数据是绘图过程中最重要的部份, 数据不正确绘制出来的图就会不正确, 2012年的黄金价格及变动率数据如下
       
            //Gold Price
            var data1 = [
                [gd(2012, 0, 1), 1652.21], [gd(2012, 1, 1), 1742.14], [gd(2012, 2, 1), 1673.77], [gd(2012, 3, 1), 1649.69],
                [gd(2012, 4, 1), 1591.19], [gd(2012, 5, 1), 1598.76], [gd(2012, 6, 1), 1589.90], [gd(2012, 7, 1), 1630.31],
                [gd(2012, 8, 1), 1744.81], [gd(2012, 9, 1), 1746.58], [gd(2012, 10, 1), 1721.64], [gd(2012, 11, 1), 1684.76]
            ];
    
            //Change
            var data2 = [
                [gd(2012, 0, 1), 0.63], [gd(2012, 1, 1), 5.44], [gd(2012, 2, 1), -3.92], [gd(2012, 3, 1), -1.44],
                [gd(2012, 4, 1), -3.55], [gd(2012, 5, 1), 0.48], [gd(2012, 6, 1), -0.55], [gd(2012, 7, 1), 2.54],
                [gd(2012, 8, 1), 7.02], [gd(2012, 9, 1), 0.10], [gd(2012, 10, 1), -1.43], [gd(2012, 11, 1), -2.14]
            ];
    
            var dataset = [
                { label: "Gold Price", data: data1, points: { symbol: "triangle"} },
                { label: "Change", data: data2, yaxis: 2 }
            ];
            
    因为有2组原如数据, 我们分别叫做data1(金价)和data2(变动率), 每组数据都是一个数组, 里面储存了每个月的数据, 格式为[x, y], 因为x轴部份我们是用时间格式的, 而Flot的时间格式数据必须为数字格式, 且是用javascript timestamps格式, 也就是毫秒. 而y轴就是黄金价格. 
    data1格式如下
       
            [gd(2012, 0, 1), 1652.21]
            
    也就等于是
       
            [1325347200000, 1652.21]
            
    因为我们为了数据建立的方便, 所以自定义一个抓取日期的函式叫gd, 程序代码如下
       
            function gd(year, month, day) {
                return new Date(year, month, day).getTime();
            }
            
    如此一来建立日期数据就方便许多, 日后要维护也比较容易 (如果你对Flot资料格式还不是很熟悉, 可以随时回到Flot数据格式介绍去看). 而另一组的变动率的数据做法跟金价的做法是一样的. 

    最后我们再把这2组原始数据结合成一个数据组(dataset), 再分别设定标签(label)为"Gold Price"和"Change", 将data属性分别设为data1和data2, 在dataset里如果你不设定其它的属性也可以, 唯一不可缺少的就是data属性. 另外我们还设定了points属性, 把其中的symbol设为triangle, 表示数据点符号会以三角形呈现.
       
            var dataset = [            
                { label: "Gold Price", data: data1, points: { symbol: "triangle"} },  //first data seires
                { label: "Change", data: data2, yaxis: 2 }                            //second data seires
            ];
            

    自定义轴属性

    到这里已经完成了80%的部份, 接下来这个部份就是美化你的图表, Flot提供了相当多的属性可以让你自定义图表的细节及外观, 在这我们先就轴的部份说明. 因为我们所绘制的图表是以x轴为时间格式, 当你用时间格式数据时, 就必须把轴属性里的mode设为"time", 设定之后Flot就会把该轴的数据当作时间来解读. 

    另外还有刻度间隔大小(tickSize) tickSize能接受的值为数字或是数组, 当你设定为2时, 刻度会变成显示2, 4, 6, .., 设定为3时会变成显示3, 6, 9, ...依此类推, 当你设定成数组时, 如tickSize: [1, "month"], 刻度就会显示成月份如Jan, Feb, Mar, ..., 除了"month"外也可设定成"day"、"year"、"hour"等. 

    因为Flot本身不支持轴卷标功能, 所以在加入档案时也一并加入了jquery.flot.axislabels.js插件让Flot能支持,所谓的轴卷标就是在图表的四周显示的卷标文字,属性axisLabel用来设定卷标显示文字, axisLabelFontSizePixels可设定文字大小, axisLabelUseCanvas用来设定文字是否以Canvas方式绘制. 范例程序代码如下...
       
            xaxis: {
                mode: "time",
                tickSize: [1, "month"],
                tickLength: 0,
                axisLabel: "2012",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10
            },
            yaxes: [{
                    axisLabel: "Gold Price(USD)",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial',
                    axisLabelPadding: 3,
                    tickFormatter: function (v, axis) {
                        return $.formatNumber(v, { format: "#,###", locale: "us" });
                    }
                }, { 
                    position: "right",
                    axisLabel: "Change(%)",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial',
                    axisLabelPadding: 3
                }
            ]
            
    因为此章用的是多轴图, 所以原本用于设定轴属性的原本是yaxis, 范例如下
       
            xaxis: {},
            yaxis: {}        
            
    但因为有多个轴, 所以yaxis必须改为yaxes, 且必须使用数组如下面范例
       
            xaxis: {},
            yaxes: [
                { 
                    //first yaxis 
                },{ 
                    //second yaxis 
                }
            ]        
            

    呼叫$.plot函式

    当你完成了以上所有的工作, 来到这最后的部份是最简单的, 只需要呼叫$.plot并带入参数即可. 如果你不熟悉$.plot函式可到绘制你的第一个图表去回顾. 

    绘制Flot图表其实没想象中的难, 只是需要时间去熟悉, 而绘制折线图是最好的开始, 后面的章节将会把其它的图表如柱形图、条形图、分区图等一一的介绍, 相信你会越来越驾轻就熟!
       
            $(document).ready(function () {
                $.plot($("#flot-placeholder"), dataset, options);            
            });
            

    本章完整程序代码

       
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="/js/lib/jquery-1.8.3.min.js" type='text/javascript'></script>  
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
        
        <script type="text/javascript" src="/js/flot/jquery.flot.min.js"></script>
        <script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>    
        <script type="text/javascript" src="/js/flot/jquery.flot.symbol.js"></script>
        <script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
        <script type="text/javascript" src="/js/flot/jshashtable-2.1.js"></script>    
        <script type="text/javascript" src="/js/flot/jquery.numberformatter-1.2.3.min.js"></script> 
        
       
    
        <script>
            //******* 2012 Gold Price Chart
            var data1 = [
                [gd(2012, 0, 1), 1652.21], [gd(2012, 1, 1), 1742.14], [gd(2012, 2, 1), 1673.77], [gd(2012, 3, 1), 1649.69],
                [gd(2012, 4, 1), 1591.19], [gd(2012, 5, 1), 1598.76], [gd(2012, 6, 1), 1589.90], [gd(2012, 7, 1), 1630.31],
                [gd(2012, 8, 1), 1744.81], [gd(2012, 9, 1), 1746.58], [gd(2012, 10, 1), 1721.64], [gd(2012, 11, 2), 1684.76]
            ];
    
            var data2 = [
                [gd(2012, 0, 1), 0.63], [gd(2012, 1, 1), 5.44], [gd(2012, 2, 1), -3.92], [gd(2012, 3, 1), -1.44],
                [gd(2012, 4, 1), -3.55], [gd(2012, 5, 1), 0.48], [gd(2012, 6, 1), -0.55], [gd(2012, 7, 1), 2.54],
                [gd(2012, 8, 1), 7.02], [gd(2012, 9, 1), 0.10], [gd(2012, 10, 1), -1.43], [gd(2012, 11, 2), -2.14]
            ];
            var dataset = [
                { label: "Gold Price", data: data1, points: { symbol: "triangle"} },
                { label: "Change", data: data2, yaxis: 2 }
            ];
    
            var options = {
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        radius: 3,
                        fill: true,
                        show: true
                    }
                },
                xaxis: {
                    mode: "time",
                    tickSize: [1, "month"],
                    tickLength: 0,
                    axisLabel: "2012",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial',
                    axisLabelPadding: 10
                },
                yaxes: [{
                    axisLabel: "Gold Price(USD)",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial',
                    axisLabelPadding: 3,
                    tickFormatter: function (v, axis) {
                        return $.formatNumber(v, { format: "#,###", locale: "us" });
                    }
                }, {
                    position: "right",
                    axisLabel: "Change(%)",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial',
                    axisLabelPadding: 3
                }
              ],
                legend: {
                    noColumns: 0,
                    labelBoxBorderColor: "#000000",
                    position: "nw"
                },
                grid: {
                    hoverable: true,
                    borderWidth: 2,
                    borderColor: "#633200",
                    backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
                },
                colors: ["#FF0000", "#0022FF"]
            };
    
            $(document).ready(function () {
                $.plot($("#flot-placeholder1"), dataset, options);
                $("#flot-placeholder1").UseTooltip();
            });
    
    
    
    
            function gd(year, month, day) {
                return new Date(year, month, day).getTime();
            }
    
            var previousPoint = null, previousLabel = null;
            var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    
            $.fn.UseTooltip = function () {
                $(this).bind("plothover", function (event, pos, item) {
                    if (item) {
                        if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                            previousPoint = item.dataIndex;
                            previousLabel = item.series.label;
                            $("#tooltip").remove();
    
                            var x = item.datapoint[0];
                            var y = item.datapoint[1];
    
                            var color = item.series.color;
                            var month = new Date(x).getMonth();
    
                            //console.log(item);
    
                            if (item.seriesIndex == 0) {
                                showTooltip(item.pageX,
                                item.pageY,
                                color,
                                "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(USD)");
                            } else {
                                showTooltip(item.pageX,
                                item.pageY,
                                color,
                                "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(%)");
                            }
                        }
                    } else {
                        $("#tooltip").remove();
                        previousPoint = null;
                    }
                });
            };
    
            function showTooltip(x, y, color, contents) {
                $('<div id="tooltip">' + contents + '</div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: y - 40,
                    left: x - 120,
                    border: '2px solid ' + color,
                    padding: '3px',
                    'font-size': '9px',
                    'border-radius': '5px',
                    'background-color': '#fff',
                    'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                    opacity: 0.9
                }).appendTo("body").fadeIn(200);
            }
        </script>
    </head>
    <body>
        <div style="width:450px;height:300px;text-align:center;margin:10px">        
            <div id="flot-placeholder1" style="width:100%;height:100%;"></div>        
        </div>
    </body>
    </html>
            


    转自:http://www.jqueryflottutorial.com/cn/how-to-make-jquery-flot-line-chart.html

    展开全文
  • 网上发现一个讲Python柱状图和折线图的小视频,我觉得讲的超基础,很适合小白,特来分享给大家~如果你也想学习数据分析,跟我一起看看下方视频,听知名技术专家李刚老师对Python可视化模块详细解析,...

    Python爬虫太火了,没写过爬虫,都不敢说自己学过Python?!

    可是刚一开始学我就遇到了难题----数据分析!听起来很高大上,有没有?

    想要做爬虫,就得先学会使用数据分析工具,制作图表这是最基本的。网上发现一个讲Python做柱状图和折线图的小视频,我觉得讲的超基础,很适合小白,特来分享给大家~

    如果你也想学习数据分析,跟我一起看看下方视频,听知名技术专家李刚老师对Python可视化模块详细解析,

    Python 数据分析

    李刚老师出版的《疯狂Java》系列图书曾得到市场的广泛认可,经过多次再版,已被多家高校选作教材。上方视频来自于李刚老师的在线视频课程《21天通关Python》第九章 数据分析

    鉴于大家都有学习Python的困惑,今天就给大家推荐一本巨有影响力的Python实战书,上线时间仅2个月,就超越了众多实力派,成京东和当当网上的长期畅销图书,并且收获了3.4W的五星好评。

    这本书可谓是笔者独家私藏图书之一了,对我学习Python有着莫大的帮助,在京东上也常常"断货",这次拿出来给大家分享一下,希望能帮到大家。

    《21天通关Python》视频课程以畅销图书为教材,由图书作者李刚亲自操刀讲解;上手门槛低,可作为0基础掌握Python教材;书籍+线上复合型学习场景特别适合Python小白学习!

    笔者跟大家分享一个福利!下单时输入优惠码csdn66,立减20元,券后仅需99元!

    扫码入Python技术交流群,可免费听技术讲座+领学习资料+视频课免费看!

    watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODc0NTkyNQ==,size_16,color_FFFFFF,t_70

    展开全文
  • 介绍了如何使用Silverlight Toolkit提供的Chart控件绘制柱状图(Column,Bar),今天会继续使用上文中所创建的代码,我们只要很少的修改就可以让柱状图显示变成饼图,折线图或散点图。 好了,开始今天的正文。 首先,...
  • 如何达成这个折线图的效果 我们在画页面时对于数据的展现,对于初学者,怎么更好的展现数据是困难的,这里将会提供一个简单的办法来展现数据的方式。 Highcharts 的优势 Highcharts 完全基于 HTML5 技术,不需要...
  • 用echarts图表中的折线图来统计分析。发现相同的数据,线条不相交,这是什么问题。请教大神?如图星期六的数据都是330。可是五条线就是不相交require.config({paths: {echarts: '/Public/Admin/echarts/dist'}});...
  • 图形报表很常用,因为展示数据比较直观,常见的形式有很多,如:折线图、柱形图、饼图、雷达图、股票图、还有一些3D效果的图表等。 Android中也有不少第三方图表库,但是很难兼容各种各样的需求。 如果第三方库不能...
  • 图形报表很常用,因为展示数据比较直观,常见的形式有很多,如:折线图、柱形图、饼图、雷达图、股票图、还有一些3D效果的图表等。 Android中也有不少第三方图表库,但是很难兼容各种各样的需求。 如果第三方库不能...
  • 今天教大家一个后台管理系统比较炫酷的统计页面,有饼状图,折线图和柱状图。 先把效果图给大家展示一下,折线图是可切换的 是不是还是挺好看的,那这样的统计图是如何实现的呢,我一步一步教给大家。 提前准备...
  • Flutter —— 二:如何绘制图表charts_flutter

    千次阅读 热门讨论 2020-04-03 00:51:03
    注:笔者的Flutter是以AndroidStudio为开发工具编写的 最近了个项目需要有折线图和饼图 因为能查找到的资料很少 实现的过程比较艰难 所以记录下来(先开个头,持续更新中) ...
  • 场景:在绘制折线图时,通常需要使用基线为参考值进行比较,如何绘制水平基线,表示平均值,最大值,最小值,或者固定值? 措施:echarts中为标线markLine,type有average,min,max取值 option = { title: { ...
  • 一个echart图表,可是后端返回的数据,有的是一个value 有的是多个value值,每种value单位不一样,所有差的很大,有的值是小数,有的好几万,所有有没有办法实现ÿ...
  • 柱状图、饼状图、折线图、散点图,数据分析图表有很多,用excel就可以生成,但是本文我想告诉你的是,通过这些图表该怎么分析? 常见的6种数据分析图表及应用方式: 1.柱状图:用于比较 柱状图是最基础的...
  • webChart使用-折线

    2013-03-26 15:49:00
    本篇文章将演示如何使用 WebChart 制作折线图。并通过示例介绍数据对象一些相关属性以及 ChartArea 的 Axis 的相关属性设置,并演示使用 WebChart 交互式的设计。 注:版本ComponentOne.Studio.Enterprise.2006....
  • Axure教程:折线

    2020-11-10 11:06:49
    上一期教会大家如何用axure一个简单的柱状图,本文将教大家如何用AXURE堆叠柱状图。 效果如下: 原型预览及下载地址: https://axhub.im/pro/1882d0a30c3301c9 一、功能介绍 所有图表不需要联外网,...
  • v-chart折线图数据改造

    千次阅读 2019-08-31 18:16:04
    chart折线图数据改造事件缘由生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLow...
  • 最近了一些关于图表方面的...上带码前,先看看我的效果如何,截图如下: 以上是相同查询条件下,所展示的不同的图表,先看看不同的图表的相关属性设置吧!上代码 /** * 折线图相关设置 * @param jFreeChart
  • 本课程以“销量”表为例,讲解如何用盈帆报表做图表。 第一步:认识图表 点击菜单栏“插入”—“插入图表”,或者在工具栏中点击,弹出图表对话框,图表类型包括:柱状图、条形图、折线图、饼图、堆叠柱状图、...
  • 原作者实例讲解了如何使用ChartCopinent,很经典的源码。在实际应用中发现需要些修改。 主要修改实现如下几点功能: 1.x轴与y轴数据动态传入 2.y轴的起点和终点动态传入,目的是保证图表在显示时可以根据传入的...

空空如也

空空如也

1 2 3 4 5
收藏数 98
精华内容 39
关键字:

如何做折线图表