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折线图的更多相关文章

  1. HighCharts中的Ajax请求的2D折线图

    HighCharts中的Ajax请求的2D折线图 设计源码: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. Flex中的FusionCharts 2D折线图

    Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...

  3. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  4. HighCharts实现多数据折线图分列显示

    HighCharts实现多数据折线图分列显示 BY ZYZ HighCharts是一个很好用的web端绘图插件,用起来很方便,它的官方支持很好.并且有中文API(不全然).画出来的图像也挺美丽的. 近 ...

  5. 使用Highcharts生成折线图与曲线图

    折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...

  6. Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例

    ​  目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...

  7. achartengine之折线图

    问题在文章的最后,大致说来就是折线图,如果点的个数大于3个的时候,不是所有的点都显示对应的值的,这是为什么呢,本来以为是小问题,但两天了还没找到原因) 将前两天的折线图代码做了小量修改,形成一个类似于 ...

  8. 【带着canvas去流浪】（2）绘制折线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...

  9. matplotlib的使用--折线图--入门

    目录 matplotlib应用介绍 一天天气变化图 两小时随机温度图 中文显示问题 个人交往统计图 多人交往统计图 总结 介绍: 举个例子(一天天气变化图): 假设一天中每隔两个小时(range(2, ...

随机推荐

  1. vsftp 的安装及配置

    安装vsftpd 直接用 yum安装,方便的很 yum -y install vsftpd #进入vsftpd目录cd /etc/vsftpd/ #Create The Virtual Users D ...

  2. NOIP 2017 Day 0. 游记

    刚从曲师大试机回来... 不巧,我抽到了和去年一样的考场,还是那么难用的XP,还是那么难用的键盘. 似乎在考场上有一股奇怪的力量,我本来在自己电脑上打板子打的没那么快,但是试机的那段时间..说出来你们 ...

  3. BZOJ 3456: 城市规划 [多项式求逆元 DP]

    题意: 求出n个点的简单(无重边无自环)无向连通图数目.方案数mod 1004535809(479 * 2 ^ 21 + 1)即可. n<=130000 DP求方案 g(n) n个点所有图的方案 ...

  4. （python功能定制）复杂的xml文件对比，产生HTML展示区别

    功能的设计初衷: 处理复杂的xml对比,屏蔽同节点先后顺序的影响 主要涉及知识点: 1.xml解析 ------- ElementTree库 2.文件比对差别 ------- difflib库 3.获 ...

  5. cnpm,vue等命令不识别的问题废人解决方案

    关于安装的cnpm,vue等不识别的问题 我想了很久然后再网上看了一些教程发现添加系统变量Path没什么用 我就在用户变量里面添加的,完美解决问题 在我的电脑右键->属性->高级系统设置- ...

  6. SDN第三次上机作业

    作业链接 1.创建以下拓扑(可采用任意方式) 2.利用OVS命令下发流表,实现VLAN功能 3.利用OVS命令查看流表 4.验证性测试 5.Wireshark抓包验证

  7. [LeetCode] 679. 24 Game（回溯法）

    传送门 Description You have 4 cards each containing a number from 1 to 9. You need to judge whether the ...

  8. Django搭建博客网站(一)

    Django搭建自己的博客网站(一) 简介 这个系列主要是通过使用Django这个python web框架实现一个简单的个人博客网站.对Django有疑问可以上Django官网查文档. 功能 后台管理 ...

  9. C++数据结构学习之顺序表

    顺序表是数据结构中最基本也是应用相当广泛的一种数据结构类型.它通常包含三个私有成分,即指向数据数组的头指针.当前表长以及表的实际容量.表的头指针通常指向数据数组的基地址,通过数组的形式进行访问数据数组 ...

  10. LeetCode - 627. Swap Salary

    Given a table salary, such as the one below, that has m=male and f=female values. Swap all f and m v ...