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. XAML: 自定义控件中事件处理的最佳实践

    在开发 XAML(WPF/UWP) 应用程序中,有时候,我们需要创建自定义控件 (Custom Control) 来满足实际需求.而在自定义控件中,我们一般会用到一些原生的控件(如 Button.Te ...

  2. oracle学习（一）

    作为一个入门选手,怕忘记,所以所有东西都尽量写下来.(省略oracle11g的安装过程) 一.sqlpuls用sys账户登录 (sqlplus是客户端连上服务器的一个工具) 1.使用cmd控制台登录 ...

  3. iOS-NSPredicate正则验证【三种验证方法】

    1.NSPredicate验证(谓词匹配) ///验证(string:验证的字符串) + (BOOL)stringValidate:(NSString *)string{ NSString *regu ...

  4. selenium headlesschrome下设置最大窗口模式

    做微博登录的时候,用selenium的chrome界面模式,可以用下面方式显示最大窗口: from selenium.webdriver.chrome.options import Options c ...

  5. nodejs express搭建一个网站整理

    先前用安卓完成了一个优惠券搜索的app,发现在app上操作比较麻烦,于是决定弄个网页版的.做网站是自己的擅长的,毕竟毕业之后咱一直用asp.net mvc做网站也好几个年头了. 可是这次我又想换个方式 ...

  6. 根据展示文字自适应 cell 高度，实现点击cell的伸缩扩展

    1.要根据展示的文字计算cell的高度, 再此给NSString写的延展的方法, 以此获取展示文字的高度 2.在自定义的cell中 声明属性和定义方法 注:在cell上初始化子控件,最好用代码写, 不 ...

  7. 从此不再担心键盘遮住输入框OC(一)

    文/Jiar_(简书作者)原文链接:http://www.jianshu.com/p/48993ff982c1著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 新版本在这里:从此不再担心 ...

  8. 使用CentOS7配置Squid代理

    其实之前配过一个squid,只是由于太懒,网上随便搜了一个教程,用了默认端口并且没有添加用户认证.某天不幸的被爬虫扫到,被用来发了半个月的垃圾邮件..直到有一天登录邮箱,看到了一大坨警告邮件,才意识到 ...

  9. PHP die与exit的区别

    最近听见有人说die和exit区别,bula~bula.决心一探究竟. 翻了翻PHP 5.6的源码(源码的位置为zend目录下zend_language_scanner.l大约是1014~1020行) ...

  10. NDK配置debug环境时：Error:FAILURE: Build failed with an exception

    Error:FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:ex ...