quota-chart

js绘制股票行情图，包括分时图，K线图

目标

1. 预计实现K线图，分时图等功能，均线

已实现

1. k线图部分
2. 分时图
3. 五日线
4. 均线

demo

直接打开dist/index.html 或者运行npm install， npm run dev 

调用说明

具体查看demo/index.html

在html中引入dist/quota-chart.js,在html

let qc = new QuotaChart.QuotationChart(config, dataService)
// 需要传入type参数 0：分时，1 五日线：2 K线：0
qc.draw(0)

dataService说明

dataService是图表的数据支撑

let dataService = {
    getKLineData: () => {
        return [
            {
                maxPrice:1,
                date:'2021-01-01',
                openPrice:1,
                closePrice:1,
                minPrice:2,
                tradeAmount: 12312,// 成交量
                tradeTurnover:123123,//成交额
            }
        ]
    },

    getTimeLineData: () => {
        return [
            {
                maxPrice:1,
                date:'2021-01-01',
                openPrice:1,
                closePrice:1,
                minPrice:2,
                tradeAmount: 12312,// 成交量
                tradeTurnover:123123,//成交额
                averagePrice: 22, //该时刻均价，用于绘制均线
                price: 23, //当前价格
                time: '9:30',// 时间
            }
        ]
    },

    // 前一天收盘价 绘制分时图必须实现该方法 
    getPrePrice:() => 1
    , 
    
    // 横坐标数量
    getTotal: () => 200

}

config配置项说明

    let config = {
        
        options:  {
        canvas: null, // canvas对象 必须
        height: 0, // 容器高度
        width: 0, // 容器宽度
        context: null,// 绘图上下文
        average: [5, 10, 20], // 均线
        marketHeightRatio: 0.7,// 行情区域所占比例
        quotaHeightRatio:  0.3,  // 指标区域
        quotaTextHeight:  16,// 指标文字区域
        dateContentHeight: 16, // 坐标系标注时间区域高度
        eventHandler: function(type:string, data:any){ // 事件处理函数
        }
    }

    /**
     * 绘图样式
     */
    styles: {
        backgroundColor: 'white', // 行情背景图
        fontSize: 12, // 行情图文字大小
        averageLineWidth: 0.4, // 均线宽度
        coordinateLineColor: 'black', // 坐标系颜色
        coordinateTextColor: 'black', // 坐标系文字颜色
        fallColor: 'green', // 下跌颜色
        riseColor: 'red', // 上涨颜色
        normalColor: 'black', // 平盘的颜色
        quotaTextFontSize: 12, // 成交量文字大小
        quotaTextFontColor: 'black', // 成交量文字颜色
        timeRectBackgroundColor: '#969799', // 十字线下方显示时间的小矩形的背景颜色
        timeTextColor: 'black',// 十字线下方显示时间的文字颜色
        average: {
            5: 'black', // 五日均线颜色
            10: 'rgb(255,172,63)', // 十日均线颜色
            20: 'purple' // 20日均线颜色
        },
        crosshair: { // 十字线
            lineWidth: 0.5,  // 十字线线条宽度
            lineColor: '#666c72',// 十字线线颜色
            fontColor: '#666c72',// 十字线线条宽度
            fontSize: 10,// 十字线右边价格颜色
            dotted: true // 是否为虚线
        },
        KLine: {
            coordinateLines: [5,2], // 坐标系横线线段数量，竖直线段数量
            coordinateLineWidth: 0.3,// 坐标系线段宽度
        },
        timeLine: {
            coordinateLines: [5,5], // 横线线段5根，竖直线段5根
            dottedX:[3], // 横向第三根线为虚线 待实现
            coordinateLineWidth: 0.3, // 坐标轴线宽度
            timeLineWidth: 0.3, // 分时线宽度
            timeLineColor: 'rgb(0, 102, 255)', // 分时图线条颜色
            averageColor: 'red' // 均线颜色
        },
        Day5Line: {
            coordinateLines: [5,6], // 横线线段5根，竖直线段6根
            dottedX:[3], // 横向第三根线为虚线
            dottedY: [],
            coordinateLineWidth: 0.3, // 坐标轴线宽度
            timeLineWidth: 0.3, // 分时线宽度
            timeLineColor: 'rgb(0, 102, 255)', // 分时图线条颜色
            averageColor: 'red' // 均线颜色
        },

    }
        
    }