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>
复制代码