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. 个性化推荐调优：重写spark推荐api

    最近用spark的mlib模块中的协同过滤库做个性化推荐.spark里面用的是als算法,本质上是矩阵分解svd降维,把一个M*N的用户商品评分矩阵分解为M*K的userFeature(用户特征矩阵) ...

  2. 使用hexo搭建个人博客

    安装前提 node.js git 如果缺少以上条件,则前往相应的官网下载安装即可.. 安装hexo $ npm install hexo-cli -g 待安装完成后,执行相关命令查看hexo的信息. ...

  3. libGDX-wiki发布

    为方便大家学习和访问,我将libgdx的wiki爬取到doku-wiki下,专门建立了以下地址.欢迎大家来共同完善. http://wiki.v5ent.com

  4. 初识DIV+CSS

    div元素是用来为html文档内大声(block-level)的内容提供结构和背景的元素. css是Cascading Style Sheets(层叠样式表单)的缩写,是一种用来表现html或xml等 ...

  5. SpringMVC源码情操陶冶-DispatcherServlet

    本文对springmvc核心类DispatcherServlet作下简单的向导,方便博主与读者查阅 DispatcherServlet-继承关系 分析DispatcherServlet的继承关系以及主 ...

  6. SpringMVC源码情操陶冶-AbstractHandlerMapping

    分析下springmvc的HandlerMapping映射的抽象类 初始化操作 通过initApplicationContext()方法进行初始化,其一般是由父类执行ApplicationContex ...

  7. BZOJ 1040: [ZJOI2008]骑士 [DP 环套树]

    传送门 题意:环套树的最大权独立集 一开始想处理出外向树树形$DP$然后找到环再做个环形$DP$ 然后看了看别人的题解其实只要断开环做两遍树形$DP$就行了...有道理! 注意不连通 然后洛谷时限再次 ...

  8. Python中Template使用的一个小技巧

    Python中Template是string中的一个类,可以将字符串的格式固定下来,重复利用. from string import Template s = Template("there ...

  9. s5pv210 的启动

    1.开发板已启动从0x0获取数据(内部64k的硬盘,里面含有三星固化的BL0段代码),将其读到a8软核中,进行运算,主要用于初始化时钟,96k的内部IRAM.并负责 指定启动设备(通常为外部硬盘),从 ...

  10. 详解CSS display:inline-block的应用

    阅读目录 基础知识 inline-block的问题 inline-block的应用 总结 本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加 ...