<!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. 线程队列queue

    队列queue 队列用于线程之间安全的信息交换 队列和列表的区别:队列里的信息get()后就没了,而列表获取数据则是copy,原列表里的值还在 使用前先实例化队列 q = queue.Queue(ma ...

  2. selenium并行的使用

    Selenium Grid Parallel Test(C#) Author: Mars (hnynes)Email:  hnynes@gmail.comMSN:    hnynes@gmail.co ...

  3. Git学习笔记day01 从GitHub克隆版本库

    本期Git教程将会带您进入Git的世界,这是您使用分布版本控制工具Git的开端,祝您学习顺利! 步骤一  在Linux系统中下载Git 如果是Ubuntu系统,在shell中输入指令 sudo apt ...

  4. 初看Mybatis 源码 （二） Java动态代理类

    先抛出一个问题,用过Mybatis的都知道,我们只需要定义一个Dao的接口,在里面写上一些CRUD相关操作,然后配置一下sql映射文件,就可以达到调用接口中的方法,然后执行sql语句的效果,为什么呢? ...

  5. 解决在php5中simple XML解析错误的问题

    2004年7月,php5正式版本的发布,标志着一个全新的PHP时代的到来.PHP5的最大特点是引入了面向对象的全部机制,并且保留了向下的兼容性.程序员不必再编写缺乏功能性的类,并且能够以多种方法实现类 ...

  6. ubuntu 安装 deb 软件包

    参考链接地址 blog.csdn.net/kevinhg/article/details/5934462 sudo dpkg -i xxxx.deb 安装一个 Debian 软件包,如你手动下载的文件

  7. 如何查看某个用户指定时间段的ABAP开发记录

    输入用户名和想查询的时间段: 执行得到结果.双击可查看具体代码: 工具源代码: REPORT tool_dev_history. PARAMETERS: name TYPE usr02-bname O ...

  8. 类型构造器--高阶类型（构造器）：Kind (type theory)--类型的元

    元类型(0阶类型):nullary type, data types 一元类型(一阶类型):unary  adj. [数] 一元的   二元类型: is the kind of a binary ty ...

  9. react里面Fragments的使用

    关于react Fragments,React 中一个常见模式是为一个组件返回多个元素.Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点. render() { retur ...

  10. 2017.10.24 Java 详解 JVM 工作原理和流程

    JVM工作原理和特点主要是指操作系统装入JVM是通过jdk中Java.exe来完成,通过下面4步来完成JVM环境. 1.创建JVM装载环境和配置 2.装载JVM.dll 3.初始化JVM.dll并挂界 ...