HighCharts中的无主题的2D折线图
HighCharts中的无主题的2D折线图
1、设计源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D带Label的折线图</title> <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> <script type="text/javascript" src="../scripts/js/highcharts.js"></script> <script type="text/javascript"> $(function(){ $('#lineDefaultChart').highcharts({ chart: { type: 'line' }, title: { text: '统计某周水果销售情况' }, subtitle: { text: '水果销量' }, xAxis: { categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'] }, yAxis: { title: { text: '单位(kg)' } }, tooltip: { enabled: true, formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'kg'; } }, legend: { layout: 'vertical', align: 'bottom', verticalAlign: 'bottom', borderWidth: 10 }, series: [{ name: '苹果', data: [98,25,69,45,15,78,67] }, { name: '橘子', data: [46,78,16,85,67,24,17] }, { name: '桃子', data: [19,54,74,18,34,90,34] }, { name: '梨子', data: [63,52,90,65,47,34,97] }, { name: '荔枝', data: [56,74,99,41,43,65,78] }] }); }); </script> </head> <body> <div id="lineDefaultChart" style="width: 1200px; height: 500px; margin: 0 auto"></div> </body> </html>
2、设计结果
HighCharts中的无主题的2D折线图的更多相关文章
- HighCharts中的Ajax请求的2D折线图
HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- Flex中的FusionCharts 2D折线图
Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...
- HighCharts之2D折线图
HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...
- HighCharts实现多数据折线图分列显示
HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...
- 使用Highcharts生成折线图与曲线图
折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...
- Qt数据可视化(散点图、折线图、柱状图、盒须图、饼状图、雷达图)开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- achartengine之折线图
问题在文章的最后,大致说来就是折线图,如果点的个数大于3个的时候,不是所有的点都显示对应的值的,这是为什么呢,本来以为是小问题,但两天了还没找到原因) 将前两天的折线图代码做了小量修改,形成一个类似于 ...
- 【带着canvas去流浪】(2)绘制折线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...
- matplotlib的使用--折线图--入门
目录 matplotlib应用介绍 一天天气变化图 两小时随机温度图 中文显示问题 个人交往统计图 多人交往统计图 总结 介绍: 举个例子(一天天气变化图): 假设一天中每隔两个小时(range(2, ...
随机推荐
- NoSQL在大数据中的应用
一.序言 NoSQL是Not Only SQL的缩写,而不是Not SQL,指的是非关系型的数据库,它不一定遵循传统数据库的一些基本要求,比如说遵循SQL标准.ACID属性.表结构等等.相比传统数据库 ...
- rsync源目录写法的一点小细节
原始状态: [root@localhost tmp]# tree . ├── a │ ├── a1 │ └── a2 └── b directories, files [root@localhost ...
- Xposed 初尝
1.初次使用xposed,之前直至其名,不闻其用. 2.相关引用配置上图 build.gradle配置,如下: dependencies { compile fileTree(include: ['* ...
- ThinkPHP删除栏目(单)
当我们做一些网站项目的时候,都会遇到这样一类问题,删除一个栏目,而这个栏目又不是最底层栏目,也就是说,被删除的栏目拥有子栏目,这时,我们执行删除该栏目的命令,就需要将该栏目及其子栏目一并删除,因为我们 ...
- 【深度学习】L1正则化和L2正则化
在机器学习中,我们非常关心模型的预测能力,即模型在新数据上的表现,而不希望过拟合现象的的发生,我们通常使用正则化(regularization)技术来防止过拟合情况.正则化是机器学习中通过显式的控制模 ...
- 撸一撸Spring Cloud Ribbon的原理
说起负载均衡一般都会想到服务端的负载均衡,常用产品包括LBS硬件或云服务.Nginx等,都是耳熟能详的产品. 而Spring Cloud提供了让服务调用端具备负载均衡能力的Ribbon,通过和Eure ...
- SpringBoot学习之Json数据交互
最近在弄监控主机项目,对javaweb又再努力学习.实际的项目场景中,前后分离几乎是所以项目的标配,全栈的时代的逐渐远去,后端负责业务逻辑处理,前端负责数据展示成了一种固定的开发模式.像thymele ...
- a:hover 等伪类选择器
a.random:hover{ color:#64FFDA; font-size:120%; } //选择的是class="random"的<a>标签. a#s ...
- golang GET 出现 x509: certificate signed by unknown authority
我们编写一个Go程序来尝试与这个HTTPS server建立连接并通信. //gohttps/4-https/client1.gopackage main import ( "fmt& ...
- 图论算法-网络最大流【EK;Dinic】
图论算法-网络最大流模板[EK;Dinic] EK模板 每次找出增广后残量网络中的最小残量增加流量 const int inf=1e9; int n,m,s,t; struct node{int v, ...