我在此用的方法本质是：鼠标滑动到对应的点后，修改这个点的值
缺点：画线不能太快。【希望有大佬帮忙解决一下，或者分享一下折线图上画线功能】
<!doctype html>
<html lang="en">
<head>
<script src="js/jquery.min.js"></script><script src="https://cdn.highcharts.com.cn/10.1.0/highcharts.js"></script>
<script src="https://cdn.highcharts.com.cn/10.1.0/modules/draggable-points.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
border: 1px solid;
margin-left: 23px;
margin-right: 21px;
margin-top: 21px;
}
</style>
<script>
$(function () {
var isAddPoint = false
var chart = new Highcharts.Chart('container',{
chart: {
renderTo: 'container',
events: {
selection: function(event) {
for (var i = 0; i < this.series[0].data.length; i++) {
var point = this.series[0].data[i];
if (point.x > event.xAxis[0].min &&
point.x < event.xAxis[0].max &&
point.y > event.yAxis[0].min &&
point.y < event.yAxis[0].max) {
point.select(true, true);
}
}
return false;
},
click: unselectByClick
},
zoomType: 'xy'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
// point: {
// events: {
// 'select': function(event){
// console.log("point selected!");
// }
// }
// },
point: {
events: {
// 拖拽过程事件
drag: function(event) {
console.log('拖拽过程', event)
},
// 拖拽结束事件
drop: function(evt) {
console.log('拖动结束', evt)
}
},
// events: {
// 'mouseOver': function(event){
// console.log(event)
// },
// 'mouseOut': function(event){
// console.log(event)
// },
// 'click': function(event){
// console.log(event)
// },
// 'select': function(event){
// console.log(event)
// },
// 'undate': function(event){
// console.log(event)
// }
// }
},
stickyTracking: false,
dragDrop: {
draggableY: true
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, "","","",""]
}],
events: {
load() {
const chart = this;
const tickAmount = chart.xAxis[0].tickPositions.length;
const columnSeries = this.series.find(s => s.userOptions.id === 'column');
if (columnSeries) {
columnSeries.update({
pointWidth: chart.plotWidth / tickAmount
})
}
}
}
})
// chart.container.on('mousedown', function(){
// console.log('111111')
// });
var xAxisLeft = chart.xAxis[0].left //x轴距离左侧距离
let lastHavePointIndex //x轴最后一个有数据的下标
let firstEmptyIndex //x轴第一个是空数据的下标
for(let i=0; i< chart.series[0].points.length; i++){
const item = chart.series[0].points[i]
if(!item.y){
firstEmptyIndex = i
break;
}
}
const unitHeight = chart.series[0].data[0].y/(chart.plotHeight - chart.series[0].data[0].plotY) //x轴值，单位长度
chart.container.onmousedown = function(e){
// console.log(chart)
// console.log(e)
// console.log(e.chartX) //点击点距离chart左上角横向距离
// console.log(e.chartY) //点击点距离chart左上角纵向距离
// console.log(e.clientX) //点击点距离屏幕左侧距离
// console.log(xAxisLeft) //x坐标轴距离图表左侧距离
// console.log(chart.plotSizeX) //图表坐标轴区域内宽
// console.log(chart.plotSizeY) //图表坐标轴区域内高
// console.log(chart.plotLeft) //坐标轴区域左上角距离图表左上角宽
// console.log(chart.plotTop) //坐标轴区域左上角距离图表左上角高
// console.log(chart.series[0].data[0].plotX) //折线图的点距离坐标轴区域左上角宽
// console.log(chart.series[0].data[0].plotY) //折线图的点距离坐标轴区域左上角高
// console.log(e)
// console.log(e.layerX)
// console.log(chart.plotLeft)
console.log(firstEmptyIndex )
lastHavePointIndex = firstEmptyIndex - 1
console.log(lastHavePointIndex )
console.log(lastHavePointIndex)
if(firstEmptyIndex < 0){
lastHavePointIndex ++
}
const clickPointPlotX = e.layerX - chart.plotLeft //点击点距离坐标轴区域左上角宽
const firstEmptyPointPlotX = chart.series[0].data[lastHavePointIndex].plotX
const firstEmptyPointPlotY = chart.series[0].data[lastHavePointIndex].plotY
console.log(clickPointPlotX )
console.log( firstEmptyPointPlotX)
console.log(clickPointPlotX - firstEmptyPointPlotX)
if( (clickPointPlotX - firstEmptyPointPlotX) > 0){
console.log('点击的右侧')
isAddPoint = true
}else{
console.log('点击的左侧')
}
// if(){
// }
}
chart.container.onmousemove = function(e){
if(isAddPoint){
// console.log(e)
console.log('2222')
const clickPointPlotX = e.layerX - chart.plotLeft
const clickPointPlotY = e.layerY - chart.plotTop
const firstEmptyPointPlotX = chart.series[0].data[firstEmptyIndex].plotX
const firstEmptyPointPlotY = chart.series[0].data[firstEmptyIndex].plotY
if(clickPointPlotY === firstEmptyPointPlotY){
lastHavePointIndex ++
}
// console.log(clickPointPlotX +'---------------'+ firstEmptyPointPlotX)
// console.log(clickPointPlotX === firstEmptyPointPlotX)
let myDataList = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, "","","",""]
if(clickPointPlotX === Math.floor(firstEmptyPointPlotX)){
console.log('添加数据')
// console.log(chart)
// console.log(e)
const addValue = unitHeight * (chart.plotHeight - e.layerY + chart.plotTop)
myDataList[firstEmptyIndex] = Number(addValue.toFixed(1))
// console.log(myDataList)
chart.series[0].setData(myDataList);
firstEmptyIndex ++
}
}
}
chart.container.onmouseup = function(e){
if(isAddPoint){
// console.log(e)
// console.log('3333')
isAddPoint = false
}
}
$('#111').click(function() {
console.log(chart.xAxis[0].left)
console.log(chart.yAxis)
});
$('#addP').click(function() {
chart.series[0].addPoint(50);
});
$('#getP').click(function() {
// chart.Point.series;
console.log(chart.series[0].data)
});
function judgeAddPoint(){
}
/*
var line,
clickX,
clickY,
selectedPoints;
var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});
clickX = e.pageX - line.translateX;
//clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}
var step = function (e) {
// line.translate(e.pageX - clickX, e.pageY - clickY)
}
var stop = function () {
$(document).unbind('.line');
console.log("stop")
}
$('#container').highcharts(options, function(chart){
// setTimeout(function(){
// selectedPoints = chart.getSelectedPoints();
// console.log(selectedPoints)
// line = selectedPoints[0]
// // .css({
// // 'cursor': 'pointer'
// // })
// // .translate(0, 0)
// .on('mousedown', start);
// },3000)
});
// the button action
$('#111').click(function() {
// Highcharts构造函数
var chart = $('#container').highcharts(),
// 获取选中的点
selectedPoints = chart.getSelectedPoints();
// 选中个数
alert('You selected '+ selectedPoints.length +' points');
// 遍历选中的点
$.each(selectedPoints, function(i, point) {
// category x轴值，index x轴下标值，y 轴值
alert("category=" + point.category + ", index=" + point.x+", y="+point.y);
})
});
/**
* 图表点击事件里去掉点选
*/
function unselectByClick() {
var points = this.getSelectedPoints();
if (points.length > 0) {
Highcharts.each(points, function (point) {
point.select(false);
});
}
}
});
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
<div style="margin:10px 0px 10px 20px;">
<button id="111">获取选中的点</button>
<button id="addP">添加点</button>
<button id="getP">获取点</button>
</div>
</body>
</html>
