tigerChart

tigerChart 是基于d3.js数据可视化库的javascript组件
可用于绘制分时图、五日分时图和K线图等股票行情图

如何使用

// 首先在js文件中引用 tigerCharts.js
// 然后对图表的配色和属性进行配置
// 最后调用 tigerChart 相应的方法

/*  
 * 绘制分时图，调用 tigerChart 的 DayTrend 方法
 * 绘制五日分时图，调用 tigerChart 的 FiveDayTrend 方法
 * 绘制K线图，调用 tigerChart 的 CandleStick 方法
 */

// 以分时线为例：

/* DayTrend等各方法都接收2个参数
 * @param container HTMLElement  容器对象
 * @param options  配置对象
 */
var chart = new tigerChart.DayTrend(document.getElementById('container'), options);

// 以下列出了 tigerChart 所有表格种类支持的所有可配置项，具体重置项需要视图表类型而定

// 配置对象options格式描述：
options = {
    // 分时线和K线共有的:
    axisMargin: {
        top: 30,    // 图表上部的间距
        middle: 18, // 图表中间的间距
        bottom: 24  // 图表底部间距
    },
    equalPriceColor: "#9999a3",    // 昨收价格颜色
    redPriceColor: "#f20642",      // 红色
    greenPriceColor: "#2ee289",    // 绿色

    svgBgColor: "#ffffff",         // svg背景 color
    topMarginBgColor: "#ffffff",   // 图表的margin-top部分的背景 color
    loadingColor: '#ffe100',       // loading color

    preCloseLineColor: "#999999",  // 昨收线 color
    trendLineColor: "#999999",     // 分时线, 及线上的圆圈 color
    gradientLineColor: "#d0e4f9",  // 分时线渐变 color
    avgPriceLineColor: "#e08c2c",  // 均线 color
    crossGridColor: "#eeeeee",     // 网格线 color

    crossTipsLineColor: "#333333", // 十字线 color
    crossTipsPanelColor: "#35353d",// 十字线提示方块背景 color
    crossTipsTextColor: "#ffffff", // 十字线提示文字 color

    tipsValueColor: "#ffffff",     // 详情框字体 color
    tipsPanelColor: "#35353d",     // 详情框提示面板背景 color

    yAxisGrayColor: "#9999a3",     // y轴 默认灰色文字
    xAxisTextColor: "#999999",     // x轴 文字 color

    isReverseColor: true;          // true为绿涨红跌，false为红涨绿跌
    enableCrossLineTip: true,      // 是否显示十字线提示及详情框
    enableVolumeChart: true,       // 是否显示成交量图表

    // K线图专有的:
    candleZoomRatio: 1,            // k线图初始放大倍数，默认为1倍
    topControllerColor: '#999999',     // 4个控制按钮线的颜色
    topControllerFillColor: '#ffffff', // 4个控制按钮的填充颜色
    colors: ['#e24663', '#e08c2c', '#2499e2'], // k线主图3条技术指标线的颜色

    enableMoveBtn: true,           // 是否支持左右方向按钮
    enableZoomBtn: true,           // 是否支持放大缩小按钮
    enableArrowKeyMove: true,      // 是否支持左右方向键移动k线
    enableMouseZoom: true,         // 是否支持鼠标滚轮缩放k线

    techIndicator: {               // k线主图技术指标设置
        MA: [5, 10, 20],
        BOLL: [20, 2],
        EMA: [10, 50, 100]
    }
};

// 可供调用的方法
chart.showLoading();     // 显示loading
chart.hideLoading();     // 隐藏loading

chart.render(data);      // 绘制图形
chart.destroy();         // 销毁图形

// 如果加载更多数据，需要提供一个 loadMoreData 方法获取数据，重新渲染绘制表格
chart.loadMoreData = function(){
    // ...
    chart.render(data);
    // ...
};

data的数据结构


/* 对数据data的要求
 * data.items对象数组中各值必须为数字，如果是字符串须转化为数字
 */

// 分时图data示例
{
    items: [
        {
            avgPrice: 5.33217,
            price: 5.31,
            time: 1470965400000,
            volume: 120900
        },
        //...
    ]
    period: "day",
    preClose: 5.35,
    ret: 0,
    serverTime: 1470991651470,
    symbol: "600246"
}


// K线图data示例
{
    items:[
        {
            close: 151.2,
            high: 153.7,
            low: 150.5,
            open: 151,
            time: 1447689600000,
            volume: 15549848
        },
        //...
    ],
    period: "day",
    ret: 0,
    serverTime: 1473323003321,
    symbol: "00700"
}