<!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. 【转】【MATLAB】模拟和数字低通滤波器的MATLAB实现

    原文地址:http://blog.sina.com.cn/s/blog_79ecf6980100vcrf.html 低通滤波器参数:Fs=8000,fp=2500,fs=3500,Rp=1dB,As= ...

  2. TP5.1 配置的获取与设置

    我们现在学习对配置文件的获取(Config::get)与设置(Config::set) 我们将学会: (1)获取到一级配置文件 (2)获取到二级配置文件 (3)设置二级配置文件 1.获取一级配置文件 ...

  3. 【转载】#437 - Access Interface Members through an Interface Variable

    Onece a class implementation a particular interface, you can interact with the members of the interf ...

  4. IOS GCD03-其他用法

    #define global_queue dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0) #define main_queu ...

  5. IOS 通过 代码 自定义cell(Cell的高度不一致)（优化性能）

    创建cell的步骤 1.新建一个继承自UITabelViewCell的类 2.重写 initWithStyle:ReuseIdentifier: 方法 添加所有需要显示的子控件(不需要设置子控件的数据 ...

  6. HDU 3639 Hawk-and-Chicken(强连通分量+缩点)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u013480600/article/details/32140501 HDU 3639 Hawk-a ...

  7. EK算法应用，构图(POJ1149)

    题目链接:http://poj.org/problem?id=1149 题意中有一点要注意,否则构图就会有问题,每个顾客走后,被打开过的那些猪圈中的猪都可以被任意的调换到其他开着的猪圈中. 这里的构图 ...

  8. windows/Linux主机重启NetBackup服务和后台进程

    关闭并启动所有NetBackup服务和后台进程 要关闭并启动所有NetBackup服务和后台驻留程序,请从命令行输入以下命令: 在Windows上: 要关闭所有NetBackup服务: install ...

  9. H3C S2100配置管理vlan与交换机管理IP

    管理 VLAN 简介:S2100系列以太网交换机任何时刻只能有一个VLAN对应的VLAN接口可以配置IP地址,该 VLAN 即为管理 VLAN.如果要对以太网交换机进行远程管理,必须配置交换机管理 V ...

  10. MapReduce计算每年最大值测试样例生成程序

    Demo.java package com.java; import java.io.BufferedWriter; import java.io.File; import java.io.FileW ...