<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="js/httpcdn.hcharts.cnjqueryjquery-1.8.3.min.js"></script>   //highcharts有相应的js文件
<script type="text/javascript" src="js/httpcdn.hcharts.cnhighchartshighcharts.js"></script>      //highcharts有相应的js文件
<script type="text/javascript" src="js/httpcdn.hcharts.cnhighchartsexporting.js"></script>        //highcharts有相应的js文件
<script>
//左侧Javascript代码
$(function () { 
$('#container').highcharts({ 
chart: { 
// type: 'bar' //条形图
type: 'column' //柱状图
}, 
title: { 
text: '区域客户数量' 
}, 
subtitle: { 
text: '' 
}, 
xAxis: { 
categories: ['香港特别行政区','四川省','江西省','云南省','广西壮族自治区','辽宁省','上海市','陕西省','海南省','北京市','浙江省','贵州省','吉林省','福建省','新疆维吾尔自治区','青海省','天津市','澳门特别行政区','江苏省','甘肃省','重庆市','山西省','西藏自治区','安徽省','河南省','内蒙古自治区','宁夏回族自治区','广东省','黑龙江省','台湾省','山东省','河北省','湖北省','湖南省'],
title: { 
text: null 
} ,
labels: {    //修改字体格式，斜体等属性
　　rotation: -45,
　　style: {
　　　　fontSize: '13px',
　　　　fontFamily: 'Verdana, sans-serif'
　　　　　}
　　　　}

}, 
yAxis: { 
min: 0, 
title: { 
text: '区域客户数量（人）', 
align: 'high' 
}, 
labels: { 
overflow: 'justify' 
} 
}, 
tooltip: { 
valueSuffix: ' 人' 
}, 
plotOptions: { 
bar: { 
dataLabels: { 
enabled: true 
} 
} 
}, 
legend: { 
layout: 'vertical', 
align: 'right', 
verticalAlign: 'top', 
x: -40, 
y: 100, 
floating: true, 
borderWidth: 1, 
backgroundColor: '#FFFFFF', 
shadow: true 
}, 
credits: { 
enabled: false 
}, 
series: [{ 
name: '区域客户数量（人）', 
data: [3000,5000,6500,10000,11000,20000,20000,20000,20000,20000,20000,40000,40000,43000,44000,50000,50000,50000,51000,55000,60000,66000,70000,70000,73000,78000,80000,88000,89000,90000,98000,100000,200000,300000] 
}/*, { 
name: 'Year 1900', 
data: [133, 156, 947, 408, 6] 
}, { 
name: 'Year 2008', 
data: [973, 914, 4054, 732, 34] 
} */ ] 
}); 
});

</script>
</head>
<body>
<div id="container" style="min-width:1200px;height:600px"></div>
</body>
</html>

js柱状图的更多相关文章

  1. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  2. canvas学习之柱状图

    项目地址:http://pan.baidu.com/s/1nvhWrwP 因为最近项目中使用到了图表,而且个人一直希望研究canvas,所以最近几天花时间对canvas好好研究了一下,并写了一个dem ...

  3. HTML5 Chart.js 框架

    HTML5 Chart.js 框架 版权声明:未经博主授权,内容严禁转载 ! Chart.js 概述: chart.js 是一个简单的.面向对象.为设计者开发者准备的图表绘制工具. 点击进入官方网址 ...

  4. v-charts简介

    一, v-charts简介 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2.0 和 echarts 封 ...

  5. d3.js多个x轴y轴canvas柱状图

    最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...

  6. 页面生成柱状图 --- D3.js

    转载自:https://www.cnblogs.com/fastmover/p/7779660.html D3.js从入门到"放弃"指南 前言 近期略有点诸事不顺,趁略有闲余之时, ...

  7. js canvas画柱状图 没什么高端的 就是一篇偶尔思路的

    公司项目要用js画柱状图,本来想用个插件吧 chart.js 忽然一想 我们也用不了那么大的插件.自己写个吧,也能看看自己那点数学水平能够不! 有几个小亮点吧 1.函数x 和 函数y 对坐标进行了转化 ...

  8. echart.gl.js实现动态3D柱状图

    echart.gl.js实现动态3D柱状图 一.总结 一句话总结:演示页面的源代码里面一定有所需的所有的js. 二.[js实践篇]——echart.gl.js实现动态3D柱状图 前言 本公司的项目需求 ...

  9. d3.js 教程 模仿echarts柱状图

    由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的.今天在echarts找到了 ...

随机推荐

  1. centos7按报错dracut

    在Windows下,将从CentOS官网上下载的CentOS7镜像文件,用UltrISO以硬盘镜像方法写入U盘 安装过程中出现下面错误: dracut-initqueue[624]:Warning: ...

  2. java：数据库操作JDBC

    JDBC详解:https://www.cnblogs.com/erbing/p/5805727.html JDBC存储过程,事务管理,数据库连接池,jdbc的封装框架:https://www.cnbl ...

  3. Linux命令之添加权限Chmod的使用

    chmod是change mode的缩写,是修改文件权限的一个命令: 一个文件分别有三组权限:用户拥有者,用户组 第一个横杆-表示文件,如果是d表示目录.还有可能是l,表示链接. 第一组(rw-)表示 ...

  4. MVC学习笔记：MVC实现用户登录验证ActionFilterAttribute用法并实现统一授权

    在项目下新建一个文件夹来专门放过滤器类,首先创建一个类LoginFilter,这个类继承ActionFilterAttribute.用来检查用户是否登录和用户权限.: using System; us ...

  5. 如何处理Eclipse错误消息 The declared package does not match the expected package

    我从github下载了一个开源项目后,导入到自己Eclipse之后,遇到了这个烦人的错误消息: The declared package "com.sap.smartService" ...

  6. Python 看书的一些记录 运算符重载

    1.类和模块有什么关系? (1)类是模块的一部分,是模块对象的属性. (2)类和模块都是命名空间,但是类是对于语法的.模块是对于文件的 (3)类支持多个实例,但是模块被导入时只有一个. 2.什么是抽象 ...

  7. CRUD全栈式编程架构之控制器的设计

    页面 这里界面我采用jquery miniui来做的,当你完全了解了整个设计之后可以轻松切换到其他的js框架,个人认为类似muniui,easyui等等这类可以将web界面做得和winform类似的框 ...

  8. logistic regression （逻辑回归） 概述

    :http://hi.baidu.com/hehehehello/blog/item/0b59cd803bf15ece9023d96e.html#send http://en.wikipedia.or ...

  9. N76E003---看门狗

    看门狗的设置 比较简单,根据芯片手册上的说明进行设置.值得一提的是设置看门狗的寄存器是保护寄存器,所以在写寄存器的时候要解除保护 void wtd_init(void) { TA=0xAA; TA=0 ...

  10. jQuery deferred 使用心得

    因为项目的原因,我接触到了jQuery deferred 的这个神奇的工具,下面我用几个例子,与大家分享我的感悟. 我们有5个很耗时的函数 分别为fA.fB.fC.fD.fE  我们的需求是fA和fB ...