完整代码如下：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>综合图</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript" src="js/exporting.js"></script>

<script type="text/javascript">

    $(function () {

        $('#container').highcharts({

            chart: {

            },

            title: {

                text: '折线，饼状，条状综合图'

            },

            //x轴

            xAxis: {

                categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']

            },

            tooltip: {

                formatter: function () {

                    var s;

                    if (this.point.name) { // the pie chart

                        s = '' +

                        this.point.name + ': ' + this.y + ' fruits';

                    } else {

                        s = '' +

                        this.x + ': ' + this.y;

                    }

                    return s;

                }

            },

            labels: {

                items: [{

                    html: 'Total fruit consumption',

                    style: {

                        left: '40px',

                        top: '8px',

                        color: 'black'

                    }

                }]

            },

            series: [{

                type: 'column',

                name: 'Jane',

                data: [, , , , ]

            }, {

                type: 'column',

                name: 'John',

                data: [, , , , ]

            }, {

                type: 'column',

                name: 'Joe',

                data: [, , , , ]

            }, {

                type: 'spline',

                name: 'Average',

                data: [, 2.67, , 6.33, 3.33],

                marker: {

                    lineWidth: ,

                    lineColor: Highcharts.getOptions().colors[],

                    fillColor: 'white'

                }

            }, {

                type: 'pie',

                name: 'Total consumption',

                data: [{

                    name: 'Jane',

                    y: ,

                    color: Highcharts.getOptions().colors[] // Jane's color

                }, {

                    name: 'John',

                    y: ,

                    color: Highcharts.getOptions().colors[] // John's color

                }, {

                    name: 'Joe',

                    y: ,

                    color: Highcharts.getOptions().colors[] // Joe's color

                }],

                center: [, ],

                size: ,

                showInLegend: false,

                dataLabels: {

                    enabled: false

                }

            }]

        });

    });

</script>

</head>

<body>

    <div id="container" style="width:850px;height:500px;margin:0 auto"></div>

</body>

</html>

显示出来的效果

现在一个折线，饼状，条状综合图就好了。

highcharts 折线，饼状，条状综合图的更多相关文章

  1. HighCharts之2D堆条状图

    HighCharts之2D堆条状图 1.HighCharts之2D堆条状图源码 StackedBar.html: <!DOCTYPE html> <html> <head ...

  2. python中matplotlib绘图封装类之折线图、条状图、圆饼图

    DrawHelper.py封装类源码: import matplotlib import matplotlib.pyplot as plt import numpy as np class DrawH ...

  3. HighCharts之2D条状图

    HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...

  4. Android图表库MPAndroidChart(八)——饼状图的扩展：折线饼状图

    Android图表库MPAndroidChart(八)--饼状图的扩展:折线饼状图 我们接着上文,饼状图的扩展,增加折现的说明,来看下我们要实现的效果 因为之前对MPAndroidChart的熟悉,所 ...

  5. Excel 2010高级应用-条状图（五）

    Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...

  6. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  7. 关于线段树or 树状树状 在二维平面搞事情！Orz

    第一式:https://ac.nowcoder.com/acm/contest/143/I 题意: 有 n 个点,一个点集 S 是好的,当且仅当对于他的每个子集 T,存在一个右边无限长的矩形,使得这个 ...

  8. jquery和highcharts折线图、柱形图、饼状图-模拟后台传參源代码

    js代码: <script type="text/javascript"> $(function(){ showLine(); showColumn(); showPi ...

  9. BZOJ3688 折线统计【树状数组优化DP】

    Description 二维平面上有n个点(xi, yi),现在这些点中取若干点构成一个集合S,对它们按照x坐标排序,顺次连接,将会构成一些连续上升.下降的折线,设其数量为f(S).如下图中,1-&g ...

随机推荐

  1. 【DP】【P1941】【NOIP2014D1T3】飞扬的小鸟

    传送门 Description Flappy Bird是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管 ...

  2. Javascript让你的网页标题飘动起来

    如果你有使用WebQQ,你也许会发现,每次收到信息的时候,就会看到title提示哪个网友或群来信息,然后网页的title就会开始飘动,挺人性化,蛮有意思的.而这个效果其实也不难,这里实现了这个效果,演 ...

  3. 图片上传（方法一：jquery.upload.js）

    一.在JSP页面引入jquery.upload.js 文件: <script type="text/javascript" src="${ctx}/script/j ...

  4. HDU4738:Caocao's Bridges(求桥)

    Caocao's Bridges Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  5. MANIFEST.MF的文件的作用

    在web项目中一个war包下面有一个文件叫:MANIFEST.MF 这个文件的作用是:告诉我们的信息有: Manifest-Version: 1.0Built-By: 张三(由谁创建)Build-Jd ...

  6. [mysql]数据库引擎查看

    1.查看数据库引擎 全局下,show engines; 2.察看数据库引擎 show variables like '%engine%'; 或者show create table xxx\G 会显示默 ...

  7. java中String字符串的替换函数：replace与replaceAll的区别

    例如有如下x的字符串 String x = "[kllkklk\\kk\\kllkk]";要将里面的“kk”替换为++,可以使用两种方法得到相同的结果 replace(CharSe ...

  8. IE8动态创建CSS

    IE8动态创建CSS 最近在项目中用到在页面中动态创建CSS方法,记录一下方便以后查看 一. 在IE下动态创建(网上收集3种方法,最后一个方法未测试成功,具体不知道什么原因) 第一种(此方法很麻烦,需 ...

  9. Java——Iterate through a HashMap

    遍历Map import java.util.*; public class IterateHashMap { public static void main(String[] args) { Map ...

  10. mysql 多列唯一索引在事务中select for update是不是行锁？

    在表中有这么一索引 UNIQUE KEY `customer_id` (`customer_id`,`item_id`,`ref_id`) 问1. 这种多列唯一索引在事务中select for upd ...