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"
}
