xChart demo -- line index

//chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组，
//第一行是表头。
var data = [
   [ "date"       , "line1" , "line2" , "line3" ],
   [ "0.1"        , -28        ,  200         , 300 ],
   [ "0.2"        , -26        ,  200         , 300 ],
   [ "0.3"        , -24        ,  200         , 300 ],
   [ "0.4"        , -22        ,  200         , 300 ],
   [ "0.5"        , -20        ,  250         , 100 ],
   [ "0.6"        , -16        ,  260         , 180 ],
   [ "0.7"        , -12        ,  260         , 180 ],
   [ "0.8"        , -8         ,  260         , 180 ],
   [ "0.9"        , -4         ,  260         , 180 ],
   [ "1.0"        , 0          ,  260         , 180 ],
   [ "1.1"        , 10         ,  260         , 180 ],
   [ "1.2"        , 14         ,  260         , 180 ],
   [ "1.3"        , 18         ,  260         , 180 ],
   [ "1.4"        , 22         ,  260         , 180 ],
   [ "1.5"        , 30         ,  260         , 180 ],
   [ "1.6"        , 36         ,  260         , 180 ],
   [ "1.7"        , 42         ,  260         , 180 ],
   [ "1.8"        , 48         ,  260         , 180 ],
   [ "1.9"        , 54         ,  260         , 180 ],
   [ "2.0"        , 60         ,  260         , 180 ]
];
var anchorXIndex = 9                              //瞄准器x轴索引
var options = {
    event : {
        //enabled : 1,                              //是否开启手型
        on : function(e){
            if(e.eventType == 'click'){
                //e.iGroup = 第几条线(从1开始)   e.iNode = 第几个节点(从1开始)
                // console.log(e.iGroup, e.iNode)
                console.log(data[e.iNode][0], data[e.iNode][1])
            }
            console.log(e.eventType, data[e.iNode][0], data[e.iNode][1])
        }
    },
    back  : {
        yAxis     :{
            enabled  : 1,
            filter : function(e){
                if( e.index % 3 != 0 ){
                    e.line.context.visible = false;
                } 
            }
        }
    },
    anchor: {                      //瞄准器
        enabled : 1,
        num  : 0,                      //数值
        xIndex: anchorXIndex           //x轴索引          
    },
    yAxis : {
        text:{
            fillStyle : '#666666'
        },
        textFormat : function( text ){
            return text + "%"
        },
        field : ["line1"]
    },
    xAxis : {
        text:{
            fillStyle : '#000000'
        },
        field : "date",
        filter : function( e ){
            if( e.index % 3 != 0 ){
                e.txt.context.visible  = false;
                e.line.context.visible = false;
            } 
        }
    },
    graphs:{
        line:{
            strokeStyle : "#1054a3"
        },
        fill:{
            alpha:0
        }
    },
    tips  : {
        line : {
            enabled : 0
        },
        fillStyle : "white",
        strokeStyle : "#999",
        alpha:1,
        content : function(info){
            var str  = "<table>"; 
            // var color =  (node.color || node.fillStyle)
            var color = info.iNode >= anchorXIndex ? '#cc3300' : '#26b471'
            str += '<tr style="color:' + color +'"><td>' + '出价：' + data[info.iNode + 1][0] + '元' + '</td></tr>'

_.each( info.nodesInfoList , function( node , i ){
                var prefix = '展现量上升：'
                var value = node.value
                if(info.iNode >= anchorXIndex){
                }else{
                    prefix = '展现量下降：'
                    value  = Math.abs(value)
                }
                var lastfix = '%'
                str += "<tr style='color:"+ color +"'>"
                str +="<td>"+ prefix +"</td>";
                str += "<td>"+ value + lastfix +"</td></tr>";
            });
            return str;
        }
    }
    };

Chartx.line("canvasTest" , data , options);

折线图 - 带瞄准器的折线图

联系人：@逢春