<!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. 学习html5 app项目开发

    这周因为部门接了个小的html5 app case,所以从事android开发的我就接下了这个项目.与其说是项目需要,其实更大部分是我自己想要做html5 app,因为我对这个全新的平台已经好奇很久了 ...

  2. sqlalchemy的cascades

    http://docs.sqlalchemy.org/en/latest/orm/cascades.html class Order(Base): __tablename__ = 'order' it ...

  3. MySQL报错:Packets larger than max_allowed_packet are not all

    MySQL根据配置文件会限制Server接受的数据包大小.有时候大的插入和更新会受 max_allowed_packet 参数限制,导致写入或者更新失败. 修改方法: 1.修改配置文件my.ini m ...

  4. VOS3000设置落地网关优先级

    问题描述: 现在有两种套餐卡A:无限通话B:每月3000分钟两个落地网关:GW100:32线用的A套餐GW101:32线用的B套餐 比如现在是12月5号还没到月底,突然发现GW101上所剩可用通话时间 ...

  5. POJ-2352 && hdu-1541 Stars---树状数组的运用

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1541 题目大意 : 在坐标上有n个星星,如果某个星星坐标为(x, y), 它的左下位置为:(x0,y ...

  6. 目的檔格式 (ELF)

    http://ccckmit.wikidot.com/lk:elf 目的檔ELF 格式(Executable and Linking Format) 是 UNIX/Linux 系統中較先進的目的檔格式 ...

  7. MySQL 主从同步 Slave_IO_Running: No

    MariaDB [chen]> show slave status \G *************************** 1. row ************************* ...

  8. Python -函数的参数定义

    一.函数的参数有四种,位置参数.默认参数.可变参数和关键字参数 def func(x, y=0, *arg, **args): '''x为位置参数 y有默认值 *arg为可变参数 **args为关键字 ...

  9. 【洛谷P1948】[USACO08JAN]电话线

    电话线 题目链接:https://www.luogu.org/problemnew/show/P1948 二分答案+最短路 我们要求一条1~n的路径,使其中的第k+1大的数最小. 二分第k+1大的数的 ...

  10. javascript中的作用域与作用域链

    前几天,在写一段js代码时,出现了一些问题,调了很长时间也没有调通,其原因是,我在处理变量的作用域时错误地沿用了C++的作用域机制.因此我回炉了一次. 如果你使用过C++或java等一系列的面向对象的 ...