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. 安卓图表引擎AChartEngine(三) - 示例源码折线图、饼图和柱状图

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

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

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

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

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

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

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

  8. HighCharts之2D折线图

    HighCharts之2D折线图 1.HighCharts之2D折线图源码 line.html: <!DOCTYPE html> <html> <head> < ...

  9. 数据可视化(Echart) :柱状图、折线图、饼图等六种基本图表的特点及适用场合

    数据可视化(Echart) 柱状图.折线图.饼图等六种基本图表的特点及适用场合 参考网址 效果图 源码 <!DOCTYPE html> <html> <head> ...

随机推荐

  1. iOS 学习 - 25 ImageIO 播放 GIF

    一.给原生的 UIImageView 添加类别来支持 GIF 播放 GIF 动态图片文件中包含了一组图片及信息,信息主要记录着每一帧图片播放的时间,我们如果获取到了 gif 文件中所有的图片同时又获取 ...

  2. SSH:Struts2.2+Hibernate3.6+Spring3.1分页示例[转]

    参考资料 1 ssh分页(多个例子) http://useryouyou.iteye.com/blog/593954 2 ssh2分页例子 http://459104018-qq-com.iteye. ...

  3. SQL - 批量修改表中所有行数据某字段的部分内容

    UPDATE 表名 SET 字段名 = REPLACE (字段名, 'old', 'new');

  4. PixelFormat 图像颜色的数据格式

    PixelFormat: (指定图像中每个像素的颜色数据的格式) Delphi                                        微软                    ...

  5. 数字证书, 数字签名, SSL(TLS) , SASL .

    因为项目中要用到TLS + SASL 来做安全认证层. 所以看了一些网上的资料, 这里做一个总结. 1. 首先推荐几个文章: 数字证书: http://www.cnblogs.com/hyddd/ar ...

  6. SystemInfo获取设备系统参数

    using UnityEngine; using System.Collections; using System.Collections.Generic; publicclassGameContro ...

  7. TZOJ:区间问题

    描述 有n项工作,每项工作分别在 si时间开始,ti时间结束.对于每项工作你选择参与与否,如果选择 了参与,那么自始至终就必须全程参与.参与工作的时间段不可以重叠(即使是开始的瞬间和结束的瞬间重叠也是 ...

  8. MySQL比like语句更高效写法locate position instr find_in_set

    你是否一直在寻找比MySQL的LIKE语句更高效的方法的,下面我就为你介绍几种. LIKE语句 SELECT `column` FROM `table` where `condition` like  ...

  9. Android Error:Could not find lottie.jar

    Android Error:Could not find lottie.jar 今天遇到了一个及其头疼的问题 同事的工程导到我的电脑里却报错,错误是找不到jcenter仓库里的lottie.jar包 ...

  10. JavaScript常见的创建对象的几种方式

    1.通过Object构造函数或对象字面量创建单个对象 这些方式有明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为了解决这个问题,出现了工厂模式. 2.工厂模式 考虑在ES中无法创建类( ...