`

jquery图表统计插件-highcharts详解

 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>渠道流量统计</title> 
    <style type="text/css"> 
     body {margin: 0; padding: 0;} 
    </style> 
        <!--引入jquery插件-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <!--引入highchart插件-->
        <script src="highcharts.js" type="text/javascript"></script> 
        <!--引入highchart主题-->
        <script src="grid.js" type="text/javascript"></script> 
        <!--调用数据,生成chart-->
        <script type="text/javascript"> 
            var chart; 
            $(document).ready(function () { 
                chart = new Highcharts.Chart({ 
                    chart: {  //整体控制
                        renderTo: 'container',  //图表容器的DIVbar:横向条形图
                        defaultSeriesType: 'line', //可选,默认为line【line:折线;spline:平滑的线;area:区域图;bar:曲线图;pie:饼图;scatter:点状图等等;
                        marginRight: 130, //外边距控制 (上下左右空隙)
                        marginBottom: 25  //外边距控制
                    }, 
                    title: { 
                        text: '渠道流量统计', //主标题
                        x: -20            //标题相对位置  默认居中
                    },
                    subtitle: {
                    text: '趋势图',//副标题
                    x: 60           //标题相对位置
                    },
                    xAxis: {          //x轴数据
                        categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'] 
                    }, 
                    yAxis: {          //y轴数据
                        title: { 
                            text: '标量' 
                        }, 
                        plotLines: [{  //标线
                            value: 0, 
                            width: 1, 
                            color: '#808080' 
                        }] 
                    }, 
                    tooltip: {        //数据点的提示框
                        formatter: function () { 
                            return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y; 
                         //formatter需要一个回调函数,可以通过this关键字打点得到当前一些图表信息
                    }, 
                    legend: { 
                        layout: 'vertical', 
                        align: 'right', 
                        verticalAlign: 'top', 
                        x: -10, 
                        y: 100, 
                        borderWidth: 0 
                    }, 
                    series: [{   //数据数组,json格式中name为这组数据的名字,data为这组数据的数组
                        name: '渠道一', 
                        data: [2,7,9,25,31,32,9] 
                    }, { 
                        name: '渠道二', 
                        data: [6,14,19,23,25,32,12] 
                    }, { 
                        name: '渠道三', 
                        data: [7,16,17,20,25,26,4] 
                    }, { 
                        name: '渠道四', 
                        data: [7,16,18,24,28,29,6] 
                    }, { 
                        name: '渠道五', 
                        data: [9, 10, 12, 16, 18, 32, 15] 
                    }] 
                }); 
     
            }); 
        </script> 
    </head> 
    <body> 
       <!-- 装载图表的容器 --> 
        <div id="container" style="width: 100%; height: 600px"> 
        </div> 
    </body> 
    </html> 

 

 

    1.如何去掉右下角的 http:// www.highcharts.com标识:
   在highcharts.js中找到:
   credits: {
        enabled: true,
        text: 'Highcharts.com',
        href: 'http://www.highcharts.com',
        position: {
            align: 'right',
            x: -10,
            verticalAlign: 'bottom',
            y: -5
        }
   只要改掉这个地方就行了,或者直接取消,enabled:false
    或者
       text: 'yourself.com',
        href: 'http://www.yourself.com',

分享到:
评论

相关推荐

    TinyYolo2实时视频流物体检测ONNX模型

    TinyYolo2实时视频流物体检测ONNX模型 运行 ONNX 模型,并结合 OpenCV 进行图像处理。具体流程包括: 1. 加载并初始化 ONNX 模型。 2. 从摄像头捕获实时视频流。 3. 对每一帧图像进行模型推理,生成物体检测结果。 4. 在界面上绘制检测结果的边界框和标签。

    chromedriver-linux64-134.0.6998.23(Beta).zip

    chromedriver-linux64-134.0.6998.23(Beta).zip

    Web开发:ABP框架4-DDD四层架构的详解

    Web开发:ABP框架4-DDD四层架构的详解

    chromedriver-linux64-135.0.7029.0(Canary).zip

    chromedriver-linux64-135.0.7029.0(Canary).zip

    (参考项目)MATLAB人脸门禁系统.zip

    实现人脸识别的考勤门禁系统可以分为以下步骤: 1. 采集人脸图像数据集:首先需要采集员工的人脸图像数据集,包括正面、侧面等多个角度的图像。可以使用MATLAB中的图像采集工具或者第三方库进行采集。 2. 预处理人脸图像数据:对采集到的人脸图像数据进行预处理,包括人脸检测、人脸对齐、人脸裁剪等操作。MATLAB提供了相关的图像处理工具箱,可以用于实现这些处理步骤。 3. 特征提取与特征匹配:使用人脸识别算法提取人脸图像的特征,比如使用人脸识别中常用的特征提取算法如Eigenfaces、Fisherfaces或者基于深度学习的算法。然后将员工的人脸数据与数据库中的人脸数据进行匹配,判断是否为注册员工。 4. 考勤记录与门禁控制:如果人脸匹配成功,系统可以记录员工的考勤时间,并且控制门禁系统进行开启。MATLAB可以与外部设备进行通信,实现门禁控制以及考勤记录功能。

    rdtyfv、ijij

    yugy

    企业IT治理体系规划.pptx

    企业IT治理体系规划.pptx

    基于Nutz、SSH、SSM的新闻管理系统.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    基于多目标粒子群算法的冷热电联供综合能源系统优化调度与运行策略分析,基于多目标粒子群算法的冷热电联供综合能源系统优化调度与运行策略分析,MATLAB代码:基于多目标粒子群算法冷热电联供综合能源系统运行

    基于多目标粒子群算法的冷热电联供综合能源系统优化调度与运行策略分析,基于多目标粒子群算法的冷热电联供综合能源系统优化调度与运行策略分析,MATLAB代码:基于多目标粒子群算法冷热电联供综合能源系统运行优化 关键词:综合能源 冷热电三联供 粒子群算法 多目标优化 参考文档:《基于多目标算法的冷热电联供型综合能源系统运行优化》 仿真平台:MATLAB 平台采用粒子群实现求解 优势:代码注释详实,适合参考学习,非目前烂大街的版本,程序非常精品,请仔细辨识 主要内容:代码构建了含冷、热、电负荷的冷热电联供型综合能源系统优化调度模型,考虑了燃气轮机、电制冷机、锅炉以及风光机组等资源,并且考虑与上级电网的购电交易,综合考虑了用户购电购热冷量的成本、CCHP收益以及成本等各种因素,从而实现CCHP系统的经济运行,求解采用的是MOPSO算法(多目标粒子群算法),求解效果极佳,具体可以看图 ,核心关键词: 综合能源系统; 冷热电三联供; 粒子群算法; 多目标优化; MOPSO算法; 优化调度模型; 燃气轮机; 电制冷机; 锅炉; 风光机组; 上级电网购售电交易。,基于多目标粒子群算法的CCHP综合

    DSP28379D串口升级方案:单核双核升级与Boot优化,C#上位机开发串口通信方案,DSP28379D串口升级方案:单核双核升级与Boot优化,C#上位机开发实现串口通信,DSP28379D串口升

    DSP28379D串口升级方案:单核双核升级与Boot优化,C#上位机开发串口通信方案,DSP28379D串口升级方案:单核双核升级与Boot优化,C#上位机开发实现串口通信,DSP28379D串口升级方案 单核双核升级,boot升级,串口方案。 上位机用c#开发。 ,DSP28379D; 串口升级方案; 单核双核升级; boot升级; 上位机C#开发,DSP28379D串口双核升级方案:Boot串口升级技术使用C#上位机开发

    基于ASP.NET MVC+三层架构和EntityFramework的微博门户网站项目.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    基于PLC的双层自动门控制:光电传感触发,有序开关与延时功能实现,附程序、画面及参考文档 ,基于PLC的双层自动门控制系统:精准控制,保障无尘环境;门间联动,智能安防新体验 ,基于plc的双层自动门控

    基于PLC的双层自动门控制:光电传感触发,有序开关与延时功能实现,附程序、画面及参考文档。,基于PLC的双层自动门控制系统:精准控制,保障无尘环境;门间联动,智能安防新体验。,基于plc的双层自动门控制系统,全部采用博途仿真完成,提供程序,画面,参考文档,详情见图。 实现功能(详见上方演示视频): ① 某房间要求尽可能地保持无尘,在通道上设置了两道电动门,门1和门2,可通过光电传感器自动完成门的打开和关闭。 门1和门2 不能同时打开。 ② 第 1 道门(根据出入方向不同,可能是门 1 或门 2),是由在通道外的开门者通过按开门按钮打开的,而第 2 道门(根据出入方向不同,可能是门 1 或门 2 )则是在打开的第 1 道门关闭后自动地打开的(也可以由通道内的人按开门按钮来打开第2 道门)。 这两道门都是在门开后,经过 3s 的延时而自动关闭的。 ③ 在门关闭期间,如果对应的光电传感器的信号被遮断,则门立即自动打开。 如果在门外或者在门内的开门者按对应的开门按钮时,立即打开。 ④ 出于安全方面的考虑,如果在通道内的某个人经过光电传感器时,对应的门已经打开,则通道外的开门者可以不按开门按钮。

    黑马程序员Java品达通用权限项目,基于SpringCloud SpringBoot 的微服务框架的权限管理解决方案.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    DeepSeek+DeepResearch-让科研像聊天一样简单

    DeepSeek+DeepResearch——让科研像聊天一样简单 (1)DeepSeek如何做数据分析? (2)DeepSeek如何分析文件内容? (3)DeepSeek如何进行数据挖掘? (4)DeepSeek如何进行科学研究? (5)DeepSeek如何写综述? (6)DeepSeek如何进行数据可视化? (7)DeepSeek如何写作润色? (8)DeepSeek如何中英文互译? (9)DeepSeek如何做降重? (10)DeepSeek论文参考文献指令 (11)DeepSeek基础知识。

    基于springboot+uniapp实现的蛋糕商城小程序.zip(毕设&课设&实训&大作业&竞赛&项目)

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    jdepend-demo-2.9.1-10.el7.x64-86.rpm.tar.gz

    1、文件内容:jdepend-demo-2.9.1-10.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/jdepend-demo-2.9.1-10.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

    关爱儿童公益网站 web 项目.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行;功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    MATLAB实现WOA-LSTM鲸鱼算法优化长短期记忆网络数据分类预测(含模型描述及示例代码)

    内容概要:本文档详细介绍了如何利用 MATLAB 实现鲸鱼优化算法 (WOA) 和长短期记忆网络 (LSTM) 相结合的技术——WOA-LSTM,在数据分类和预测领域的应用。文章首先概述了LSTM在网络训练中超参数依赖的问题以及WOA作为一种新颖的全局优化算法的优势。接着阐述了该项目的研究背景、目的及其重要意义,并深入讨论了项目面临的六大主要挑战,从模型优化到超参数空间管理。文档特别强调WOA-LSTM融合所带来的性能提升、降低计算复杂度的能力及其实现自动化的超参数优化流程。除此之外,文中展示了模型的应用广泛性,覆盖了从金融市场的股票预测到智能制造业的各种实际场景,并提供了具体的模型架构细节和代码实例,以帮助理解模型的工作原理和技术要点。 适合人群:具有一定编程技能的研究人员、工程师和科学家们,尤其是对深度学习技术和机器学习感兴趣的专业人士。 使用场景及目标:该文档的目标是向用户传授使用MATLAB实现WOA-LSTM进行复杂数据分类和预测的方法论,旨在指导读者理解和掌握如何利用WOA进行超参数寻优,从而改善LSTM网络性能。 其他说明:通过阅读这份文档,使用者不仅能够获得有关WOA-LSTM技术的具体实现方式的知识,而且还可以获取关于项目规划和实际部署过程中的宝贵经验。

    tomcat安装及配置教程.md

    tomcat安装及配置教程.md

    **MATLAB下微电网两阶段鲁棒优化经济调度策略:基于CCG算法与min-max-min结构求解**,MATLAB微电网两阶段鲁棒优化经济调度程序:构建min-max-min结构模型,实现恶劣场景下

    **MATLAB下微电网两阶段鲁棒优化经济调度策略:基于CCG算法与min-max-min结构求解**,MATLAB微电网两阶段鲁棒优化经济调度程序:构建min-max-min结构模型,实现恶劣场景下的低成本调度,灵活调整调度保守性,利用列约束生成算法求解,MATLAB代码:微电网两阶段鲁棒优化经济调度程序 关键词:微网优化调度 两阶段鲁棒 CCG算法 经济调度 参考文档:《微电网两阶段鲁棒优化经济调度方法》 仿真平台:MATLAB YALMIP+CPLEX 优势:代码注释详实,出图效果非常好(具体看图),非目前烂大街版本,请仔细辨识 主要内容:构建了微网两阶段鲁棒调度模型,建立了min-max-min 结构的两阶段鲁棒优化模型,可得到最恶劣场景下运行成本最低的调度方案。 模型中考虑了储能、需求侧负荷及可控分布式电源等的运行约束和协调控制,并引入了不确定性调节参数,可灵活调整调度方案的保守性。 基于列约束生成算法和强对偶理论,可将原问题分解为具有混合整数线性特征的主问题和子问题进行交替求解,从而得到原问题的最优解。 最终通过仿真分析验证了所建模型和求解算法的有效性,具体内容可自行查

Global site tag (gtag.js) - Google Analytics