zoukankan      html  css  js  c++  java
  • asp.net mvc 之显示24小时折线对比数据

    我这里因为没有数据,所以就给出个大概图吧,实现的结果是,a的值和b的值都在图中显示,两者进行对比

    前台代码:

     function getzhe() {
                var yset = new Array();
                var x1 = new Array();
                var x2 = new Array();
                $.ajax({
                    type: 'get',
                    url: "/DeFault/GetHH",
                    datatype: 'json',
                    success: function (data) {
                        data = $.parseJSON(data);
                        for (var i = 0; i < data.length; i++) {
                            yset[i] = data[i].day_date;
                            x1[i] = parseInt(data[i]["count"]);
                            x2[i] = parseInt(data[i]["wh_count"]);
                        }
                        $('#lineChart').highcharts({
                            chart: {
                                type: 'area'
                            },
                            title: {
                                text: null
                            },
                            subtitle: {
                                text: ''
                            },
                            xAxis: {
                                categories:yset,
                                title: {
                                    text: null
                                }
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: '数量(次)',
                                    align: 'high'
                                },
                                labels: {
                                    overflow: 'justify'
                                }
                            },
                            tooltip: {
                                valueSuffix: '个'
                            },
                            plotOptions: {
                                bar: {
                                    dataLabels: {
                                        enabled: true
                                    }
                                }
                            },
                            legend: {
                                layout: 'vertical',
                                align: 'right',
                                verticalAlign: 'top',
                                x: -40,
                                y: 100,
                                floating: true,
                                borderWidth: 1,
                                backgroundColor: '#FFFFFF',
                                shadow: true
                            },
                            credits: {
                                enabled: false
                            },
                            series: [
                                {
                                    name: "总话务",
                                    showInLegend: false,
                                    data: x1
                                },
                                {
                                    name: "外话",
                                    showInLegend: false,
                                    data: x2
                                }
                            ]
                        });
                    }
                });
            }

    后台代码实现:

  • 相关阅读:
    Collections集合工具类排序
    集合的学习
    gitee使用方法
    vue 首屏优化
    vue 配置多个路由别名
    vue中的状态管理Vuex
    【Python】Pandas合并表格之(append, join , concat方法)
    elementui中提交表单自动刷新页面的问题
    滴滴实习面试题
    CSS 日常积累
  • 原文地址:https://www.cnblogs.com/gxwa/p/9103352.html
Copyright © 2011-2022 走看看