HQChart使用教程57-如何调整K线的柱子缩放大小
K线缩放
hqchart K线缩放是配置在一个全局的缩放数组里面, 每放大一次或缩小一次, 都会调整这个数组的索引。
var ZOOM_SEED= //0=柱子宽度 1=间距
[
[48,10], [44,10],
[40,9], [36,9],
[32,8], [28,8],
[24,7], [20,7],
[18,6], [16,6],
[14,5], [12,5],
[8,4], [6,4], [4,4],
[3,3],
[3,1], [2,1], [1,1], [1,0],
];
注意:当K线的宽度<=3时, 绘制的时候直接是一条竖线了。
调整缩放数组
JSChart.GetKLineZoom() 可以获取全局的缩放数组实例,获取以后可以根据你的需求自己调整
JSChart.GetKLineZoom(aryZoom) 设置全局的缩放比例数组
实例
var zoom=JSChart.GetKLineZoom(); //获取全局的缩放数组
//新的K线宽度和间距设置
let NEW_ZOOM_SEED= //0=柱子宽度 1=间距
[
[48,10], [44,10],
[40,9], [36,9],
[32,8], [28,8],
[24,7], [20,7],
[18,6], [16,6],
[14,5], [12,5],
[8,4], [6,4], [4,4],
];
zoom.length=0;
for(var i=0;i<NEW_ZOOM_SEED.length;++i) //发新的缩放配置设置到hqchart全局变量里面
{
zoom.push(NEW_ZOOM_SEED[i]);
}
一屏显示更多数据
我们可以往缩放数组的尾部增加更小的缩放比例配置,这样就可以显示更多数据了, [K线宽度, K线间距必须是0]
var zoom=JSChart.GetKLineZoom(); //获取全局的缩放数组
zoom.push([0.9,0]);
zoom.push([0.8,0]);
zoom.push([0.7,0]);
zoom.push([0.6,0]);
zoom.push([0.5,0]);
zoom.push([0.4,0]);
zoom.push([0.3,0]);
zoom.push([0.2,0]);
小程序设置最小K线宽度
在小程序里面 默认K线宽度<4 就会使用竖线绘制。 可以通过配置Resource来调整这个最小值
调的太小了可能会导致有些K线最高最低的竖线不能绘制在柱子的中间,应为h5画布不能精确到小数位的绘图,后模糊。 这个功能小程序才有,h5没做。
import { JSCommon } from "../../jscommon/umychart.wechat.3.0.js";
onReady: function ()
{
var resouce=JSCommon.JSChart.GetResource(); //获取全局配置
resouce.MinKLineBarWidth=3; //修改最小K线宽度
//创建历史K线类
var element = new JSCommon.JSCanvasElement();
element.ID = 'historychart';
element.Height = this.data.Height; //高度宽度需要手动绑定!! 微信没有元素类
element.Width = this.data.Width;
this.HistoryChart = JSCommon.JSChart.Init(element); //把画布绑定到行情模块中
this.HistoryChart.SetOption(this.HistoryOption);
},
一屏70个K线,最小K线宽度=3
一屏70个K线,最小K线宽度=4