xChart demo -- line

//chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组，
//第一行是表头。
var data= [
    ["xfield","uv" ,"pv","click"],
    [ 1      , 3 , 20 , 33    ],
    [ 2      , 0   , 51 , 26    ],
    [ 3      , 32   , 45 , 43    ],
    [ 4      , 58  , 35 , 31    ],
    [ 5      , 79  , 73 , 71    ],
    [ 6      , 88  , 54 , 39    ],
    [ 7      , 55  , 68 , 65    ],
    [ 8      , 66   , 83 , 51    ]
];

//chart的配置信息，所有的图表都可以极简到只需要配置xAxis，yAxis的字段
var options = {
    yAxis : {
        //这里说明会显示 uv 和pv 两个维度的 折线
        field : ["uv" , "pv" ]
    },
    xAxis : {
        field : "xfield"
    }
};
//Chartx.line开始初始化chart实例
var chartx = Chartx.line("canvasTest" , data , options);

var eventHandler = function( e ){
    var log = "<div>type："+ e.type + " iGroup：" + e.params.iGroup + " iNode：" + e.params.iNode+"</div>";
    $("#chart-event-log").prepend( $(log) );
}

chartx.then(function( line ){
    line.on( "tap panstart panmove panend" , function( e ){
        eventHandler(e);
    } );
    //mobile 触屏事件对应的为
    //tap(点击)， panstart(手势准备开始移动) ，panmove(手势移动中)， panend(手势移动结束)
});

折线图（line chart）- mobile触屏事件demo,请启用浏览器的mobile模式

联系人：@逢春 @释剑

日志输出：