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. PHP支付第3方接口使用方法。

    去年写过一遍博客文章. 网站申请不到支付宝接口.微信接口,免接口收款实现方式. 网络在发展,支付宝也好,微信也好,技术在进步,这种方式已经不能使用了,明显的一个问题是,支付宝的刷新工具,会定时退出,必 ...

  2. c#监测电脑状态

    public class DeviceMonitor { static readonly PerformanceCounter cpuCounter = new PerformanceCounter( ...

  3. HDU1013，1163 ，2035九余数定理 快速幂取模

    1.HDU1013求一个positive integer的digital root,即不停的求数位和,直到数位和为一位数即为数根. 一开始,以为integer嘛,指整型就行吧= =(too young ...

  4. 关于node的基础理论，书上看来的

    最近看了一本书,说了一些Node.js的东西,现在来记录一下,让自己记得更牢靠一点. 在书上,是这样介绍的:Node.js模型是源于Ruby的Event Machine 和 Python的Twiste ...

  5. zabbix 3.4.1 解决中文乱码

    docker zabbix中文乱码 基础镜像为:zabbix/zabbix-web-nginx-mysql 1.首先下载msyh.ttf 2.docker cp msyh.ttf 容器:/usr/sh ...

  6. 解决windows10和ubuntu16.04双系统下时间不对的问题

    电脑安装完windows10与ubuntu16.04双系统后,Ubuntu的时间总会和Windows的时间相差8小时,原因在于windows认为BIOS时间是本地时间,Ubuntu认为BIOS时间是U ...

  7. Java经典编程题50道之三十五

    有一个数组,将其最大的元素与第一个元素交换,最小的元素与最后一个元素交换,然后输出数组. public class Example35 {    public static void main(Str ...

  8. dubbo filter实现接口认证springboot idea

    最近公司有业务需求,要对Dubbo接口调用者进行身份验证,验证通过才能调用,网上一些资料不够全面,遂整理了一下. 在provider方定义一个filter,需要实现com.alibaba.dubbo. ...

  9. 在Mac下配置Maven环境

    下载Maven安装文件,(http://maven.apache.org/download.html)如:apache-maven-3.5.0-bin.zip,然后解压到本地目录. 打开 .bash_ ...

  10. 54.1 怎样才算学会django？ 知道这28个知识点才算会django2

    学到什么程度才算会django了?这篇文章帮你梳理一下 关于django2的28个不可不知的知识点总结: 1.cookie操作: -客户端本地存储的键值对 2.session操作: -服务器端可以保存 ...