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. 移动端 滑动删除 swipeDelete

    功能比较简单常见,最近整理一下做备份记录.先看看线上 整体实际效果 下面是swipeDelete 用法 demo 默认参数 var defaults = { distance:80, //滑动距离 u ...

  2. linux上的用户管理

    作为一个专业的服务器发行版,CentOS上存在着n多个用户,作为一个专业的运维工程师,linux的用户管理和用户组的管理是做为一个SA必不可少的工作. 下面我们就先来谈谈linux中的用户管理: us ...

  3. 【机器学习实战 第九章】树回归 CART算法的原理与实现 - python3

    本文来自<机器学习实战>(Peter Harrington)第九章"树回归"部分,代码使用python3.5,并在jupyter notebook环境中测试通过,推荐c ...

  4. ldconfig几个需要注意的地方

    1. 往/lib和/usr/lib里面加东西,是不用修改/etc/ld.so.conf的,但是完了之后要调一下ldconfig,不然这个library会找不到 2. 想往上面两个目录以外加东西的时候, ...

  5. 2017年总结的前端文章——CSS高级技巧汇总

    1. 页面顶部阴影 body:before{ content: ""; position: fixed; top:-10px; left:; width: 100%; height ...

  6. 如何让oracle DB、监听和oem开机启动(dbstart)

    如何让oracle DB.监听和oem开机启动(dbstart) 让oracle DB.监听和oem开机启动(dbstart) Oracle提供了伴随操作系统自动重启的功能,在Windows中,可以修 ...

  7. 洛谷 [P2486] 染色

    树剖+线段树维护连续相同区间个数 注意什么时候长度要减一 #include <iostream> #include <cstdio> #include <cstdlib& ...

  8. Vue的生命周期

    1.1.实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如需要设置数据监听.编译模板.挂载实例到 DOM.在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周 ...

  9. javascript 回到顶部 动画效果

    上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...

  10. [Python Study Notes]psutil模块

    系统性能信息模块psutil psutil是一个跨平台库,能够轻松实现获取系统运行的进程和系统利用率(CPU,内存,磁盘,网络等)信息,主要应用于系统监控,分析和限制系统资源及进程的管理,它实现了同等 ...