一个K线图小组件，支持桌面移动端全平台

<div id="kline"></div>
var c=document.getElementById("kline"); 
var kline = new dsxKline({
    element:c,
    onLoading:function(o){
        // 开始请求加载数据
    },
    nextPage:function(data,index){
        // 开始请求加载下一页数据
    },
    onCrossing:function(data,index){
        // 十字线移动数据
    },
    updateComplate:function(){
        // 完成K线一次更新
    }
});

kline.update({
    chartType:dsxConfig.chartType.timeSharing,
    //theme:"dark",
    candleType:dsxConfig.candleType.hollow,
    zoomLockType:dsxConfig.zoomLockType.right,
    isShowKlineTipPannel:false,
    sides:kline.chartType<=1?["VOL"]:["VOL","MACD"],
    datas:data,
});
kline.finishLoading();

// 周期 cycle=t,d,w,m,y,m1,t5 分别代表 分时,日K,周K,年K,1分钟,五日
// data为最后一根K线数据，数据结构 分时图=[日期,时间,价格,成交量,成交额] K线图=[日期,开,高,低,收,成交量,成交额] 分钟K线=[日期,时间,开,高,低,收,成交量,成交额]
kline.refreshLastOneData(data,cycle);

// k线图表类型
dsxConfig.chartType = {
    timeSharing:0,  // 分时图
    timeSharing5:1, // 五日分时图
    candle:2,       // K线图
}


// 蜡烛图实心空心
dsxConfig.candleType = {
    hollow:0, // 空心
    solid:1   // 实心
}

// 缩放K线锁定类型
dsxConfig.zoomLockType = {
    left:1,         // 锁定左边进行缩放
    middle:2,       // 锁定中间进行缩放
    right:3,        // 锁定右边进行缩放
    follow:4,       // 跟随鼠标位置进行缩放，web版效果比较好
}

// 交易所类型及其交易时间
dsxConfig.market = {
    sh:"9:30-11:30,13:00-15:00", // 上海
    sz:"9:30-11:30,13:00-15:00", // 深圳
    bj:"9:30-11:30,13:00-15:00", // 北京
    hk:"9:30-12:00,13:00-16:00", // 港股
    us:"9:30-12:00,12:00-16:00", // 美股
    fu:"9:30-12:00,12:00-16:00", // 期货
    sp:"9:30-12:00,12:00-16:00", // 现货
    wh:"9:30-12:00,12:00-16:00", // 外汇
}

// 指标配置
dsxConfig.index = {
    VOL:{
        title:"成交量",
        value:{VOL:0,MA5:5,MA10:10},
        draw:{VOL:{model:"column",color:"CLOSE",hiddenTitle:true},MA5:{model:"line",color:"#FFA500"},MA10:{model:"line",color:"#87CEFA"}}
    },
    TMA:{
        title:"",
        value:{"均价":1},
        draw:{ "均价":{model:"line",color:"#FFA500"},"新值":{model:"text",color:"",colorValue:0}},
    },
    MA:{
        title:"均线",
        value:{ MA5:5, MA10:10, MA30:30,MA60:60},
        draw:{ MA5:{model:"line",color:"#FFA500"}, MA10:{model:"line",color:"#87CEFA"}, MA30:{model:"line",color:"#BA55D3"},MA60:{model:"line",color:"#808000"},},
    },
    MACD:{
        title:"MACD(26,9,12)",
        value:{DIFF:0,DEA:0,MACD:0,long:26,d:9,short:12},
        draw:{DIFF:{model:"line",color:"#FFA500"},DEA:{model:"line",color:"#87CEFA"}, MACD:{model:"column",color:"#BA55D3"}},
    },
    KDJ:{
        title:"KDJ(9,3,3)",
        value:{K:9,D:3,J:3},
        draw:{K:{model:"line",color:"#FFA500"},D:{model:"line",color:"#87CEFA"},J:{model:"line",color:"#BA55D3"}},
    },
    BOLL:{
        title:"BOLL(20,2)",
        value:{UP:0,MID:0,LOW:0,N:20,M:2},
        draw:{UP:{model:"line",color:"#FFA500"},MID:{model:"line",color:"#87CEFA"}, LOW:{model:"line",color:"#BA55D3"}},
    }
}


// 主题配置
dsxConfig.theme = {
    white:{
        backgroundColor:"#ffffff", // 背景颜色
        color:"#333333",// 字体颜色
        fontSize:window.devicePixelRatio<=1?12:10,// 字体大小
        redColor:"#F44336",// 蜡烛图红色
        greenColor:"#4CAF50",// 蜡烛图绿色
        crossLineColor:"#2196F3",// 十字线颜色
        crossLineWidth:1.0,// 十字线宽度
        fontBgColor:"#2196F3", // 文字背景颜色 十字线提示的文字背景颜色
        gridLineColor:"#eeeeee",// 网格线颜色
        gridLineCount:3,// 网格线数量
        gridLineWidth:1.0,// 网格线的宽度
        lineWidth:1.0, // 线条的大小 指标线条的大小
        klineWidth:10,// 一根k线的默认宽度
        klinePadding:1,// k线之间的间隔
        timeSharingLineColor:"#2196F3",// 分时图价格线的颜色
        timeSharingLineFillColor:"rgba(65,105,225,0.1)", // 分时图价格线区域填充颜色
    },
    dark:{
        backgroundColor:"rgba(19, 23, 34, 1)", // 背景颜色
        color:"#c5cbce",// 字体颜色
        fontSize:window.devicePixelRatio<=1?12:10,// 字体大小
        redColor:"#F44336",// 蜡烛图红色
        greenColor:"#4CAF50",// 蜡烛图绿色
        crossLineColor:"#2196F3",// 十字线颜色
        crossLineWidth:1.0,// 十字线宽度
        fontBgColor:"#2196F3", // 文字背景颜色
        gridLineColor:"#191b28",// 网格线颜色
        gridLineCount:3,// 网格线数量
        gridLineWidth:1.0,// 网格线的宽度
        lineWidth:1.0, // 线条的大小 指标线条的大小
        klineWidth:10,// 一根k线的默认宽度
        klinePadding:1,// k线之间的间隔
        timeSharingLineColor:"#2196F3",// 分时图价格线的颜色
        timeSharingLineFillColor:"rgba(65,105,225,0.1)", // 分时图价格线区域填充颜色
    }
}