极客观点
项目管理
HarmonyOS
问题描述
highchart 图标插件在手机上不能左右滑动
问题出现的环境背景及自己尝试过哪些方法
在window的Google浏览器的手机模拟器上，在官方api里面没有找到相关的属性，我打算通过touchmove来改变他的日期从而实现左右的功能，但是目前的问题是不知道设置日期的键值是哪个。
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html>
<head>
<title>iPhone.Zepto</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<style>container{
width:100%;
}
.but{
margin-top:100px;
}
</style>
</head>
<body>
<input type="text" id="test">
<div class="but">but</div>
<div class="but">blur</div>
<div id="container" >图表加载中...</div>
<script src="../../src/zepto.js"></script>
<script src="../../src/event.js"></script>
<script src="../../src/touch.js"></script>
<script src="../../src/ajax.js"></script>
<script src="https://img.hcharts.cn/highstock/highstock.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/drag-panes.js"></script>
<script>
$(document).ready(function(){
$('#test').blur(function(){
console.log('blur')
});
$('#test').focus(function(){
console.log('focus')
});
$('.but').eq(0).click(function(){
$('#test')[0].focus();
});
$('.but').eq(1).click(function(){
$('#test')[0].blur();
});
function trans_time(date){
return date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate()
}
var one_day = 24*3600*1000;
Highcharts.setOptions({
lang: {
rangeSelectorZoom: ''
}
});
$.getJSON('https://data.jianshukeji.com/stock/history/000001', function (data) {
if(data.code !== 1) {
alert('读取股票数据失败！');
return false;
}
data = data.data;
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
console.log(ohlc,volume)
// create the chart
var chart = Highcharts.stockChart('container', {
rangeSelector: {
selected: 1,
inputDateFormat: '%Y-%m-%d'
},
chart: {
events: {
load: function () {
// $('.highcharts-range-selector')[0].onblur = function(){
// alert(1)
// };
$('#container').live('touchstart',function(e){
console.log('touchstart',e)
var startX = e.changedTouches[0].pageX,
startY = e.changedTouches[0].pageY;
console.log(startX,startY)
$('#container').live('touchmove',function(e){
console.log('touchmove',e)
var moveX = e.changedTouches[0].pageX,
moveY = e.changedTouches[0].pageY,
left = moveX - startX;
var input;
if(left>0){
input = $('.highcharts-range-selector');
var oldTime = new Date(input.eq(0).val()).getTime();
var new_tiem = oldTime+one_day*left;
var transResult = trans_time(new Date(new_tiem));
console.log(transResult);
input.eq(0).val(transResult);
console.log(input[0].value);
console.log('向右偏移='+left)
}else{
console.log('向左偏移='+left)
}
});
$('#container').live('touchend',function(e){
console.log('touchend',e)
});
})
}
}
},
title: {
text: '平安银行历史股价'
},
xAxis: {
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%y-%m',
year: '%Y'
},
minRange:5000
},
tooltip: {
split: false,
shared: true,
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: '股价'
},
height: '65%',
resize: {
enabled: true
},
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: '成交量'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: '平安银行',
color: 'green',
lineColor: 'green',
upColor: 'red',
upLineColor: 'red',
tooltip: {
},
navigatorOptions: {
color: Highcharts.getOptions().colors[0]
},
data: ohlc,
dataGrouping: {
units: groupingUnits
},
id: 'sz'
},{
type: 'column',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
console.log(chart)
});
})
</script>
</body></html>
你期待的结果是什么？实际看到的错误信息又是什么？
最终我想要的结果是能实现k线图左右滑动
你可以试下HQChart
H5, 微信小程序 沪深/港股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图. 分析家语法,(麦语法),第3放数据替换接口
https://github.com/jones2000/...