HighCharts之2D带Label的折线图

1、HighCharts之2D带Label的折线图源码

LineLabel.html：

<!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(){
    	 $('#lineLabelChart').highcharts({
    		 chart: {
                 type: 'line'
             },
             title: {
                 text: '统计某周水果销售情况'
             },
             subtitle: {
                 text: '水果销量'
             },
             xAxis: {
                 categories: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
             },
             yAxis: {
                 title: {
                     text: '单位(kg)'
                 }
             },
             tooltip: {
                 enabled: false,
                 formatter: function() {
                     return '<b>'+ this.series.name +'</b><br/>'+
                         this.x +': '+ this.y +'kg';
                 }
             },
             plotOptions: {
                 line: {
                     dataLabels: {
                         enabled: true,
                         style: {
                             textShadow: '0 0 3px white, 0 0 3px white',
                             fontSize: '14px',
                             color: '#0000FF',
                             cursor: 'pointer'
                         }
                     },
                     enableMouseTracking: true
                 }
             },
             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="lineLabelChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、运行结果

HighCharts之2D带Label的折线图的更多相关文章

  1. HighCharts之2D含有负值的面积图

    HighCharts之2D含有负值的面积图 1.HighCharts之2D含有负值的面积图源码 AreaNegative.html: <!DOCTYPE html> <html> ...

  2. highcharts 动态生成x轴和折线图

    highchart 动态生成x轴和折线图 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...

  3. HighCharts中的无主题的2D折线图

    HighCharts中的无主题的2D折线图 1.设计源码 <!DOCTYPE html> <html> <head> <meta charset=" ...

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

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

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

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

  6. 又快又好！巧用ChartJS打造你的实用折线图

    又快又好!巧用ChartJS打造你的实用折线图 最终效果 本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线. 要实现最终效果,我们要分三步走: 生成折线图: 生 ...

  7. HighCharts之2D折线图

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

  8. HighCharts之2D柱状图、折线图的组合多轴图

    HighCharts之2D柱状图.折线图的组合多轴图 1.实例源码 SomeAxis.html: <!DOCTYPE html> <html> <head> < ...

  9. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. Notice！

    之后的小车内容在这里更新,开源社区,新浪博客不再更新.

  2. React 16.3来了：带着全新的Context API

    文章概览 React在版本16.3-alpha里引入了新的Context API,社区一片期待之声.我们先通过简单的例子,看下新的Context API长啥样,然后再简单探讨下新的API的意义. 文中 ...

  3. ServiceStack.OrmLite T4模板使用记录

    前言 最近研究了下ServiceStack.OrmLite,文档中也提到了使用T4模板对数据库中已经有了表进行实体的映射,这里也顺便记录下使用的步骤和情况. 开始使用 引用T4模板 首先我们创建一个工 ...

  4. 新人如何运行Faster RCNN的tensorflow代码

    0.目的 刚刚学习faster rcnn目标检测算法,在尝试跑通github上面Xinlei Chen的tensorflow版本的faster rcnn代码时候遇到很多问题(我真是太菜),代码地址如下 ...

  5. Python基础篇(四)

    Python中的字典类似于Java中的Map,数据以键值对的形式存储. 字典可以用以下的方式使用: >>> phonebook = {"alice":" ...

  6. bzoj 3996: [TJOI2015]线性代数 [最小割]

    3996: [TJOI2015]线性代数 题意:给出一个NN的矩阵B和一个1N的矩阵C.求出一个1*N的01矩阵A.使得 \(D=(A * B-C)* A^T\)最大.其中A^T为A的转置.输出D.每 ...

  7. BZOJ 1854: [Scoi2010]游戏 [连通分量 | 并查集 | 二分图匹配]

    题意: 有$n \le 10^6$中物品,每种两个权值$\le 10^4$只能选一个,使得选出的所有权值从1递增,最大递增到多少 一开始想了一个奇怪的规定流量网络流+二分答案做法...然而我还不知道怎 ...

  8. HDU 2141 Can you find it? [二分]

    Can you find it? Give you three sequences of numbers A, B, C, then we give you a number X. Now you n ...

  9. 实时滚动图表绘制方法: LightningChart教程 + 源码下载

    LightningChart图形控件彻底发挥了GPU加速和性能优化的最大效应,能够实时呈现超过10亿数据点的庞大数据,为大家提供先进与快速的图表库.这里的实时图实现的比较简单,大家先试一下这个效果,熟 ...

  10. php复习整理1--位运算符

    前言    子曰:"温故而知新,可以为师矣." php复习整理系列即是对已掌握的知识的温习,对久不使用的知识点进行重新学习,从而对php基础知识的掌握更加牢固.当然因为是重新温习, ...