Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。
创建 HTML
主要是新建一个画图容器，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>highcharts</title>
</head>
<body>
<!-- 画图容器 -->
<div id="container" style="width: 1000px; height: 600px; margin: 0 auto;background-color: bisque;"></div>
</body>
</html>
复制代码引入相关依赖
主要是 Jquery 库和 Highchats 相关依赖，代码如下：
<!-- jquery -->
<script type="text/javascript" src="./assest/jquery-3.1.1.min.js"></script>
<!-- highcharts -->
<script type="text/javascript" src="./assest/highcharts/highcharts.js"></script>
<!-- 拖拽 -->
<script type="text/javascript" src="./assest/highcharts/draggable-points.js"></script>
<!-- series 标签 -->
<script type="text/javascript" src="./assest/highcharts/series-label.js"></script>
<script type="text/javascript" src="./assest/highcharts/accessibility.js"></script>
<!-- b样条曲线 -->
<script type="text/javascript" src="./assest/highcharts/b-spline.js"></script>
复制代码实现画图
主要实现的功能如下：
- 基本画图
- 图上的点可进行拖动
- 鼠标左键框选部分放大
- 点击重置按钮恢复被放大的图
- 自定义重置按钮
具体实现的代码如下：
<script type="text/javascript">
$(document).ready(function () {
// x轴数据
var xAixsData = ["2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022"]
// series 数据
var series = [{
name: '安装，实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175, 164175, 174175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434, 45434, 50434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387, 40387, 55387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227, 35227, 36227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111, 19111, 20000]
}]
// 用于拖放效果
var pData = []
$.each(series, function (i, v) {
pData.push(v.data)
})
// 图表配置
var options = {
lang: {
resetZoom: '重置',
resetZoomTitle: '重置缩放比例'
},
chart: {
type: 'spline',
zoomType: 'x',
selectionMarkerFill: 'rgba(0,0,0, 0.2)',
// resetZoomButton: {//不显示默认重置按钮，如果设置缩放重置按钮为图片该样式将失效
// theme: { style: { display: 'none' } }
// }
},
title: {
text: '可拖拽可缩放的HighCharts'
},
xAxis: {
title: {
text: '年份'
},
categories: xAixsData//x轴数据
},
yAxis: {
title: {
text: "数据"
},
labels: {
formatter: function () {
return this.value;
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false,
},
legend: {
align: 'center', //水平方向位置
verticalAlign: 'top', //垂直方向位置
x: 0, //距离x轴的距离
y: -10 //距离Y轴的距离
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '',
},
dataZoom: [{
type: 'slider',
xAxisIndex: 0,
filterMode: 'none'
},
{
type: 'slider',
yAxisIndex: 0,
filterMode: 'none'
},
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'none'
},
{
type: 'inside',
yAxisIndex: 0,
filterMode: 'none'
}
],
plotOptions: {
series: {
stickyTracking: false,
dragDrop: {
draggableY: true,
events: {
drag: function (point) { }, //拖
drop: function (p, seriesIndex) {//放
var dropDataY = p.point.y;
var dropDataIndex = p.point.index;
pData[seriesIndex][dropDataIndex] = dropDataY
},
}
}
},
column: {
stacking: 'normal',
minPointLength: 2
},
line: {
cursor: 'ns-resize'
},
spline: {
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
},
}
},
series: series,
}
//执行画图
Highcharts.chart("container", options)
//设置缩放重置按钮为图片
var resetZoomImg;
Highcharts.Chart.prototype.showResetZoom = function () {
var chart = this;
if (!resetZoomImg) {
resetZoomImg = chart.renderer.image(
"./assest/images/reset.png", chart
.chartWidth - 50, 30, 20, 20) //src, x, y, width, height
.on('click', function () {
chart.zoomOut();
$(this).remove();
resetZoomImg = null;
}).attr({
zIndex: 100,
title: '重置'
}).add()
}
}
});
</script>
复制代码