var chart;
$(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart_combo' //关联页面元素div#id
},
title: { //图表标题
text: '2011年东北三大城市水果消费量统计图'
},
xAxis: { //x轴
categories: ['柑橘', '香蕉','苹果', '梨子'], //X轴类别
labels:{y:} //x轴标签位置:距X轴下方18像素
},
yAxis: { //y轴
title: {text: '消费量(万吨)'}, //y轴标题
lineWidth: //基线宽度
},
tooltip: {
formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框
var s;
if (this.point.name) { // 饼状图
s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '万吨(' +
twoDecimal(this.percentage) + '%)';
} else {
s = '' + this.x + ': ' + this.y + '万吨';
}
return s;
}
},
labels: { //图表标签
items: [{
html: '水果消费总量对比',
style: {
left: '48px',
top: '8px'
}
}]
},
exporting: {
enabled: false //设置导出按钮不可用
},
credits: {
text: 'helloweba.com',
href: 'http://www.helloweba.com'
},
series: [{ //数据列
type: 'column',
name: '长春',
data: [8.4, 9.8, 11.4, 15.6]
},
{
type: 'column',
name: '沈阳',
data: [9.2, 7.8, 10.2, 16.8]
},
{
type: 'column',
name: '哈尔滨',
data: [6.5, 9.4, 13.2, 18.6]
},
{
type: 'spline',
name: '平均值',
data: [8.03, , 11.6, ]
},
{
type: 'pie', //饼状图
name: '水果消费总量',
data: [{
name: '长春',
y: 45.2,
color: '#4572A7'
},
{
name: '沈阳',
y: ,
color: '#AA4643'
},
{
name: '哈尔滨',
y: 47.7,
color: '#89A54E'
}],
center: [, ], //饼状图坐标
size: , //饼状图直径大小
dataLabels: {
enabled: false //不显示饼状图数据标签
}
}]
});
});

Highcharts条形与柱形同时显示的更多相关文章

  1. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  2. 启动mysql时显示:/tmp/mysql.sock 不存在的解决方法

    启动mysql时显示:/tmp/mysql.sock 不存在的解决方法 启动mysql时报错的解决(mysql 5.0.45 redhat as 43)  ====================== ...

  3. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...

  4. vue隐藏APP启动时显示的{{}}

    vue隐藏APP启动时显示的{{}} vue组件在编译好之前会显示{{msg}},在官网上找到这个

  5. Ouibounce – 在用户离开你网站时显示模态弹窗

    Ouibounce 是一个微小的库,用于实现在用户离开你的网站的时候显示一个模式窗口.这个库可以帮助你增加着陆页的转换率. Ouibounce 会在当鼠标光标移动到接近(或通过)视口(viewport ...

  6. 看代码学知识之(2) ListView无数据时显示其他View

    看代码学知识之(2) ListView无数据时显示其他View 今天看的一块布局是这样的: <!-- The frame layout is here since we will be show ...

  7. telnet时显示:允许更多到 telnet 服务器的连接。请稍候再试

    telnet时显示:允许更多到 telnet 服务器的连接.请稍候再试    解决办法: windows自带telnet服务器默认的最大连接数为2,要想修改该设置,可以在命令行键入tlntadmn c ...

  8. ios8 tableView设置滑动删除时 显示多个按钮

      ** *  tableView:editActionsForRowAtIndexPath:     //设置滑动删除时显示多个按钮 *  UITableViewRowAction          ...

  9. 实现easyui datagrid在没有数据时显示相关提示内容

    本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1 ...

随机推荐

  1. Web Api2 用户认证模板解析---本地用户

    本文我们将把关注Visual Studio用户认证模板中的 本地用户名/密码帐号特性.他们将其分为了两部分:帐户控制器具备如创建帐号和修改密码等功能:另一部分是在OAuth2认证服务器中进行的认证.我 ...

  2. Android Studio常用快捷键汇总(mac)

    查看原文:http://blog.csdn.net/u010818425/article/details/52266195 mac上按键符号 ⌥ : option / alt ⇧ : shift ⌃ ...

  3. 《Cortex-M0权威指南》之体系结构---异常和中断

    转载请注明来源:cuixiaolei的技术博客 异常会引起程序控制的变化.在异常发生时,处理器停止当前的任务,转而执行异常处理程序,异常处理完成后,会继续执行刚才的任务.异常分为很多种,中断是其中之一 ...

  4. 解决SecureCRT中文显示乱码

    操作步骤 以下两步: 远程linux机器.修改环境变量LANG.例如在~/.bash_profile里面添加 export LANG=zh_CN.UTF8 重新登录之后生效. 现在查看一下当前设置: ...

  5. Oracle基础 exp/imp和expdp/impdp的区别:

    一.exp/imp和expdp/impdp在功能上的区别: 1.把用户usera的对象导入到userb emp/imp用法: formuser=usera touser=userb; empdp/im ...

  6. Flume与Kafka集成

    一.Flume介绍 Flume是一个分布式.可靠.和高可用的海量日志聚合的系统,支持在系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理,并写到各种数据接受方(可定制)的能 ...

  7. hdu 3234 并查集

    虚拟一个根节点n,设其值为0.并且始终保持其为根. #include<map> #include<set> #include<cmath> #include< ...

  8. css隐藏元素display:none,opacity:0;filter:alpha(opacity=0-100;,visibility:hidden的区别

    在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.我们一般有三种方式:display:none, opacity:0;fil ...

  9. java使用POI jar包读写xls文件

    主要使用poi jar来操作excel文件.代码中用到的数据库表信息见ORACLE之表.使用public ArrayList<Person> getPersonAllRecords()获得 ...

  10. NSMutableArray 根据key排序

    /** * NSMutableArray 排序 * * @param dicArray 数据 * @param key 关键字排序 * @param yesOrNo 升序或降序排列,yes为升序,no ...