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. 使用localhost可以访问，但使用本地ip+端口号无法访问

    今天想使用ip访问本机的iview-admin项目,结果怎么配置都无法访问,根据iview工程执行的命令npm run dev了解到是webpack配置的问题,打开工程里的node_modules文件 ...

  2. 如何实现Selenium自动化读取H5手机缓存

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6890675.html 前言: 由于Se ...

  3. Dell服务器R320在Centos6.5系统上安装MegaCli管理主板集成磁盘阵列卡

    折腾了两天啊,我的神啊,,终于可以安装了 针对Dell服务器的R320版本主板集成的磁盘阵列卡,需要下载MegaCli 8或更新版本 下载链接: http://pan.baidu.com/s/1mgB ...

  4. iOS-AFNetworking封装Get(自定义HTTP Header)和Post请求及文件下载

    前面提到AFNetworking是一个很强大的网络三方库,首先你需要引入AFNetworking三方库:如封装的有误还请指出,谢谢! 1.Get请求 /**Get请求 url 服务器请求地址 succ ...

  5. 下载vlc遭遇网络劫持

    一次偶然的机遇,在公司下载"vlc播放器",下载之后安装完就变成了"搜狗手机助手".而且连续几次下载都是这样,我以为是我安装了搜狗输入法的缘故.        ...

  6. 浅谈JavaScript的事件（事件处理程序）

    事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如 ...

  7. NIO内存映射

    磁盘的IO因为速度较慢,可能成为系统运行的瓶颈.所以磁盘的IO在操作系统级实现了提前读,延迟写的机制来提升IO的性能. 提前读就是一次读取需求的数据的同时多读接下来的一段数据至OS缓冲区中,延迟写就是 ...

  8. vue2.0实现前端星星评分功能组件

    <template id="pingJia"> <div> <ul> <li :class="{li1:1,bg1:index% ...

  9. Jenkins 登录信息无效。请重试。

    刚开始安装的时候没有问题,去 D:\jenkins\secrets下找到initialAdminPassword这个文件 输入里面的密码就行 隔了一段时间登陆,登陆不上去了,这时候,可以去 D:\je ...

  10. docker cs50 ide 安装

    ECS上搭建Docker(CentOS7): https://help.aliyun.com/document_detail/51853.html docker官方文档: https://docs.d ...