完整代码如下：

<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. 20165218 实验一 Java开发环境的熟悉

    实验一 Java开发环境的熟悉 课程:java程序设计 姓名:赵冰雨 学号:20165218 指导教师:娄嘉鹏 实验日期:2018.4.2 实验密级:Java开发环境的熟悉 实验内容.步骤与体会: ( ...

  2. UVA10462：Is There A Second Way Left? （判断次小生成树）

    Is There A Second Way Left? Description: Nasa, being the most talented programmer of his time, can’t ...

  3. Sql Server 2008 R2 数据库脚本导出方法

    经常忘记怎么搞,截几张图记录一下. 1 选中要导出的数据库,右键—>任务—>生成脚本 2 3 4 查看保存的脚本

  4. Sublime Text 配置python文件

    每次配置Sublime Text的都是好一顿搜索配置信息,今天特地把自己电脑上配置好的信息保存下来,方便以后使用. 用到了 AutoPEP8.Anaconda.SublimeCodeIntel.Sub ...

  5. maven报错 Failure to transfer org.apache.maven.plugins:maven-compiler-plugin:pom:3.5.0 from

    maven报错误,类似于: Failure to transfer org.apache.maven.plugins:maven-compiler-plugin:pom:3.5.0 from http ...

  6. linux时区修定转

    https://blog.csdn.net/feng12345zi/article/details/80348501

  7. 阿里云oss命令详解

    SYNOPSIS 上传,下载或拷贝Objects SYNTAX ossutil cp file_url cloud_url [-r] [-f] [-u] [--output-dir=odir] [-- ...

  8. rsync的命令参数【转】

    本篇文章,我们只介绍rsync的命令参数. rsync参数的具体解释如下: -v, –verbose 详细模式输出 -q, –quiet 精简输出模式 -c, –checksum 打开校验开关,强制对 ...

  9. Markdown 代码块中再内嵌一个行内代码

    在 jQuery 1.9 之前(不含1.9):如果传入一个空字符串. null 或 jQuery.parseJSON( jsonString ) ,该函数将返回,而不是抛出一个错误,即使它不是有效的  ...

  10. IConfigurationSectionHandler 接口

    IConfigurationSectionHandler 处理对特定的配置节的访问. 示例代码: public class MyConfig : IConfigurationSectionHandle ...