HighCharts之2D柱状图、折线图和饼图的组合图

1、实例源码

ColumnLinePie.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D柱状图、折线图和饼图的组合图</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(){
    	 $('#columnLinePieChart').highcharts({
    		 chart: {
             },
             title: {
                 text: '水果销售组合图'
             },
             xAxis: {
                 categories: ['苹果', '橘子', '梨子', '香蕉', '草莓']
             },
             tooltip: {
                 formatter: function() {
                     var s;
                     if (this.point.name) {
                         s = ''+
                             this.point.name +': '+ this.y +' kg';
                     } else {
                         s = ''+
                             this.x  +': '+ this.y;
                     }
                     return s;
                 }
             },
             labels: {
                 items: [{
                     html: '销售总量',
                     style: {
                         left: '40px',
                         top: '8px',
                         color: 'black'
                     }
                 }]
             },
             series: [{
                 type: 'column',
                 name: '星期一',
                 data: [3, 2, 1, 3, 4]
             }, {
                 type: 'column',
                 name: '星期二',
                 data: [2, 3, 5, 7, 6]
             }, {
                 type: 'column',
                 name: '星期三',
                 data: [4, 3, 3, 9, 5]
             }, {
                 type: 'column',
                 name: '星期四',
                 data: [4, 3, 3, 9, 4]
             },{
                 type: 'column',
                 name: '星期五',
                 data: [4, 3, 3, 9, 6]
             },{
                 type: 'column',
                 name: '星期六',
                 data: [4, 3, 3, 9, 8]
             },{
                 type: 'column',
                 name: '星期日',
                 data: [4, 3, 3, 9, 4]
             },{
                 type: 'spline',
                 name: '平均值',
                 data: [3, 2.67, 3, 6.33, 3.33],
                 marker: {
                 	lineWidth: 2,
                 	lineColor: Highcharts.getOptions().colors[7],
                 	fillColor: 'white'
                 }
             }, {
                 type: 'pie',
                 name: '销售比例',
                 data: [{
                     name: '星期一',
                     y: 13,
                     color: Highcharts.getOptions().colors[0]
                 }, {
                     name: '星期二',
                     y: 23,
                     color: Highcharts.getOptions().colors[1]
                 }, {
                     name: '星期三',
                     y: 49,
                     color: Highcharts.getOptions().colors[2]
                 }, {
                     name: '星期四',
                     y: 25,
                     color: Highcharts.getOptions().colors[3]
                 }, {
                     name: '星期五',
                     y: 36,
                     color: Highcharts.getOptions().colors[4]
                 }, {
                     name: '星期六',
                     y: 74,
                     color: Highcharts.getOptions().colors[5]
                 }, {
                     name: '星期日',
                     y: 84,
                     color: Highcharts.getOptions().colors[6]
                 }],
                 center: [100, 80],
                 size: 100,
                 showInLegend: true,
                 dataLabels: {
                     enabled: true
                 }
             }]
         });
     });
</script>
</head>
<body>
   <div id="columnLinePieChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

2、实例结果

HighCharts之2D柱状图、折线图和饼图的组合图的更多相关文章

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

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

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

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

  3. HighCharts之2D柱状图

    1.HighCharts之2D柱状图源码 column.html: <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. Tableau使用折线图和饼图的组合

    一.订单日期拖拽至列-右键天(具体到年月日) 二.订单日期拖拽至筛选器-年月-随机选择一个月的数据 三.创建计算字段-LOD-销售额 {EXCLUDE[类别]:SUM([销售额])} 四.销售额和刚刚 ...

  5. Python培训：绘制饼图或圆环图

    使用pyplot的pie()函数可以快速地绘制饼图或圆环图,pie()函数的语法格式如下所示: 该函数常用参数的含义如下. ·x:表示扇形或楔形的数据. ·explode:表示扇形或楔形离开圆心的距离 ...

  6. 安卓图表引擎AChartEngine(三) - 示例源码折线图、饼图和柱状图

    折线图: package org.achartengine.chartdemo.demo.chart; import java.util.ArrayList; import java.util.Lis ...

  7. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

  8. FusionCharts 2D柱状图和折线图的组合图

    1.设计思路 (1)了解组合图的特性以及用法,选用图的类型: (2)设计出两根柱子和两根折线,分开展示. 2.设计步骤 (1)设计页面 Column2DLine.html: <!DOCTYPE ...

  9. HighCharts之2D带Label的折线图

    HighCharts之2D带Label的折线图 1.HighCharts之2D带Label的折线图源码 LineLabel.html: <!DOCTYPE html> <html&g ...

随机推荐

  1. iOS-电子书开发 笔记

    前言 刚接手电子书项目时,和安卓开发者pt Cai老师[aipiti Cai,一个我很敬佩很资深的开发工程师,设计领域:c++.Java.安卓.QT等]共同商议了一下,因为项目要做要同步,移动端[手机 ...

  2. ABP官方文档翻译 3.1 实体

    实体 实体类 聚合根类 领域事件 常规接口 审计 软删除 激活/失活实体 实体改变事件 IEntity接口 实体是DDD(领域驱动设计)的核心概念之一.Eric Evans描述它为"An o ...

  3. getopt for windows

    Glibc库里有个getopt用于解析命令行参数,挺方便的,下面的是别人从Glibc源码的获取的几个getopt相关的文件,已经将平台相关的修改掉,windows下可以调用,本来是要用没用到就没去看正 ...

  4. 除了使用URLSearchParams处理axios发送的数据，但是兼容性不好，其他的兼容方法

    在使用axios这个ajax插件的时候,我们有些时候会遇到一些问题,比如:数据格式不正确 以最简单的例子为基础(这里使用post方法): 在上面的例子中我们直接调用axios的post方法,传给后台的 ...

  5. document.activeElement 过滤选择文件弹窗导致的页面失焦

    在线考试页面,常常需要检测用户是否作弊. 一般是监听页面是否失焦的方式,而失焦的方式有很多种,比如QQ弹窗,切换页面,切换程序,input文件上传选择文件等 选择文件是正常情况,这种情况下需要过滤 本 ...

  6. pyhton:图像旋转

    最近一个作业中要用到图像旋转,分享一下学习过程.如有讲错的地方,恳请指正! 图像旋转,想想真简单啊,不就是将图像矩阵乘上一个旋转平移矩阵就完了吗?实际上还真没这么简单.首先这个旋转平移矩阵怎么获得?通 ...

  7. Spring Task定时任务Scheduled

    Spring的任务调度,采用注解的形式 Spring中@Scheduled的用法. spring的配置文件如下,先扫描到任务的类,打开spirng任务的标签 <beans xmlns=" ...

  8. AnnotationUtils

    /** * 查询类中符合指定annotation的属性信息 * @param objCls 实体类 * @param annCls 注解类 * @return HashMap<实体属性名, An ...

  9. Ubuntu16.04+Apache虚拟主机配置详解

    在window下,Apache的配置文件是httpd.conf,但在Linux下安装了Apache后发现其配置并不像window下那么简单,Linux下Apache将各个设置项分在了不同的配置文件中, ...

  10. MarkDown 编辑数学公式

    1. 参考博客:http://blog.csdn.net/smstong/article/details/44340637 1 数学公式的web解决方案 在网页上显示漂亮的数学公式,是多年来数学工作者 ...