<!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. 关于Android Studio中的一个小问题——R文件引用Id失败

    错误情况: 今天使用AS建立了一个新的EmptyProject,结果出现错误 setContentView(R.layout.activity_main); R文件的引用Id失败.真的是莫名奇妙... ...

  2. 笨办法学Python（十二）

    习题 12:提示别人 当你键入 raw_input() 的时候,你需要键入 ( 和 ) 也就是“括号(parenthesis)”.这和你格式化输出两个以上变量时的情况有点类似,比如说 "%s ...

  3. Jmeter入门8 连接microsoft sql server数据库取数据

    本文以Jmeter 连接microsoft sql server为例. 1 从微软官网下载Microsoft SQL Server JDBC Driver 地址:http://www.microsof ...

  4. Jmeter入门4 添加断言 判断响应数据是否符合预期

    发出请求之后,通过添加断言可以判断响应数据是否是我们的预期结果. 1 在Jmeter中发送一个登录的http请求(参数故意输入错误).结果肯定是登陆失败啦. 但结果树中http请求的图标显示‘绿色’表 ...

  5. mybatis怎样自动生成java类，配置文件？

    其实没有什么东西是可以自动生成的,只不过是别人已经写好了,你调用罢了. 所以想要mybatis自动生成java类,配置文件等,就必须要一些配置和一些jar包.当然这些配置也很简单. 为了有个初步的认识 ...

  6. MYSQL的基本语法

    .默认约束 区别:mysql里面DEFAULT关键字后面是不用加括号的 复制代码 代码如下: --sqlserver CREATE TABLE emp ( id INT DEFAULT() ) --m ...

  7. POJ-3274 Gold Balanced Lineup---hash经典题！

    题目链接: https://vjudge.net/problem/POJ-3274 题目大意: 给定多头牛的属性,每头牛的属性由一个非负数表示,该数的二进制表示不会超过K位,它的二进制表示的每一位若为 ...

  8. HDU(1698),线段树区间更新

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1698 区间更新重点在于懒惰标记. 当你更新的区间就是整个区间的时候,直接sum[rt] = c*(r- ...

  9. flex布局－常用布局

    在使用flex布局,老是需要去查资料,很多常用的,知道大概,可还是需要去过一遍,这里记录一下几个常用的flex布局 一个div,内容垂直居中 html <div className='topHe ...

  10. 将TIF格式批量转换成jpg或png格式（C#自制软件）

    此项目基于.net framework 4.0 全选tif,拖进去,等待,完成. so easy... 链接:https://pan.baidu.com/s/1uCDhAT0uHRjdy4g557wK ...