前言: 公司项目最近因台风导致部分数据丢失,有了个新需求:在图形上添加标志提醒用户,数据丢失不是我的锅,是台风的锅.
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>highcharts配合layui弹出层实现图形数据列标记的增删改查</title>
</head>
<body>
<div id="container"></div>
</body>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="./layer/layer.js"></script>
<script>
var data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
var lineData = [];
$.each(data,function(i,v){
lineData.push({
y: v,
dataLabels:{
enabled: true,
allowOverlap: true,
crop:false,
overflow:'none',
formatter:function(){
return '';
},
shadow:false
},
events: {
click: function () {
var x = this.x,
z = this.category,
y = this.y;
layer.open({
type: 1,
title:"请输入或编辑标记信息",
content: '<input type="text" class="layuiInp" autofocus style="margin:10px 20px;">',
btn: ['保存', '取消'],
yes: function (index, layero) {
updataLine(x, y,z, $('.layuiInp').val())
layer.closeAll();
},
btn2: function(){
layer.closeAll();
}
});
}
}
})
})
var chart = Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data:lineData
}]
});
function updataLine(x,y,z,value){
chart.series[0].data[x].update({
dataLabels: {
enabled: true,
allowOverlap: true,
crop: false,
overflow:'none',
formatter: function () {
return String(value);
},
shadow: false
},
});
}
</script>
</html>
效果图:
2199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
