HighCharts学习

步骤一:
在html 中引用highcharts.js
下载地址 https://www.highcharts.com.cn/download  下载的版本Highcharts 9.3.0

然后再项目中引入highcharts.

步骤二:

 var prefix = '/' + "url";
    $(function () {
        query()
    });
    var options = {
        chart: {
            type: 'line'
        },
        title: {
            text: '时间段调用数据'
        },
        xAxis: {
            categories: ['00', '01', '02', '03']
        },
        yAxis: {
            title: {
                text: '调用次数'
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            line: {
                dataLabels: {
                    // 开启数据标签
                    enabled: true
                },
                // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                enableMouseTracking: false
            }
        },
        series: []
    };

    function query() {
        var params = {};
        params = tranData();
        $.ajax({
            url: prefix + "/url",
            type: 'post',
            data: params,
            dataType: "json",
            success: function (result) {
                options.series = result;
                //初始化chart
                var chart = new Highcharts.Chart('container', options);
            }
        });
    }

    //获取参数
    function tranData() {
        var params = {}
        params['code'] = document.getElementById("code").value;
        console.log(params);
        return params;
    }