problem description
highchart icon plugin cannot swipe left or right on mobile phone
the environmental background of the problems and what methods you have tried
in the mobile phone simulator of window"s Google browser, no relevant attributes are found in the official api. I intend to change its date through touchmove to achieve the left and right function, but the current problem is that I don"t know which key to set the date.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
< 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> 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(){
$("-sharptest").blur(function(){
console.log("blur")
});
$("-sharptest").focus(function(){
console.log("focus")
});
$(".but").eq(0).click(function(){
$("-sharptest")[0].focus();
});
$(".but").eq(1).click(function(){
$("-sharptest")[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)
// };
$("-sharpcontainer").live("touchstart",function(e){
console.log("touchstart",e)
var startX = e.changedTouches[0].pageX,
startY = e.changedTouches[0].pageY;
console.log(startX,startY)
$("-sharpcontainer").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)
}
});
$("-sharpcontainer").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 >
what result do you expect? What is the error message actually seen?
in the end, the result I want is to be able to slide the k-diagram left and right 