<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="js/httpcdn.hcharts.cnjqueryjquery-1.8.3.min.js"></script>  //http://www.hcharts.cn/demo/index.php?p=27 有对应的js
<script type="text/javascript" src="js/httpcdn.hcharts.cnhighchartshighcharts.js"></script>     //http://www.hcharts.cn/demo/index.php?p=27 有对应的js
<script type="text/javascript" src="js/httpcdn.hcharts.cnhighchartsexporting.js"></script>      //http://www.hcharts.cn/demo/index.php?p=27 有对应的js
<script>
//左侧Javascript代码
$(function () {
$('#container').highcharts({

chart: {
type: 'column'
},

title: {
text: '源客户数、新创建客户数'
},

xAxis: {
//tickInterval: 1
categories: ['电商系统', 'SCRM系统', 'vivo帐户系统', '电子保卡系统'],
title: {
text: null
}
},

yAxis: [{
type: 'logarithmic',
minorTickInterval: 1,
title: {
text: '新建比率' ,
style: {
color: '#666666'
}
},
labels: {
format: '{value} %',
style: {
color: '#666666'
}
}
},
{ // Secondary yAxis
title: {
text: '源客户数 人' ,
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} 人',
style: {
color: '#4572A7'
}
},
opposite: true
}],

tooltip: {
shared: true,
//headerFormat: '<b>{series.name}</b><br />',
//pointFormat: 'x = {point.x}, y = {point.y}'
},

series: [
{
name: '源客户数(人)',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [20000,50000,80000,30000],
tooltip: {
valueSuffix: ' 人'
}

},
{
name: '新建比率(%)',
color: '#666666',

data: [50.00,80.00,37.50,3.33],
pointStart: 0,
tooltip: {
valueSuffix: ' %'
},

//type: 'spline',   //折线图
type: 'column',   //柱形图
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white' }
}
//{
// data: [0, 2, 4, 8, 16, 32, 64],
// pointStart: 0
//},
]
});
});
</script>
</head>
<body>
<div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>

js双轴柱状图的更多相关文章

  1. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  2. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  3. Highcharts 测量图；Highcharts 圆形进度条式测量图；Highcharts 时钟；Highcharts 双轴车速表；Highcharts 音量表（VU Meter）

    Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' .chart.type 描述了图表类型.默认值为 "line". ...

  4. 如何拼接FusionCharts的JSON格式的双轴图

    1.问题背景 假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来. 2.设计源码 /** * * @ ...

  5. Java DualPivotQuickSort 双轴快速排序 源码 笔记

    DualPivotQuicksort source code 这个算法是Arrays.java中给基本类型的数据排序使用的具体实现.它针对每种基本类型都做了实现,实现的方式有稍微的差异,但是思路都是相 ...

  6. Python Pandas 时间序列双轴折线图

    时间序列pv-gmv双轴折线图 import numpy as np import pandas as pd import matplotlib.pyplot as plt n = 12 date_s ...

  7. 快速排序详解(lomuto划分快排,hoare划分快排,classic经典快排,dualpivot双轴快排源码)

    目录 快速排序(lomuto划分快排,hoare划分快排,classic经典快排,dualpivot双轴快排) 一.快速排序思想 二.划分思想 三.测试用例 快速排序(lomuto划分快排,hoare ...

  8. 双轴按键摇杆控制器控制TFTLCD（使用ADC1双通道DMA传输）

    实验使用如下所示的双轴按键摇杆控制器,来控制TFTLCD上显示的直线.首先介绍一下双轴按键摇杆控制器.原理:十字摇杆为一个双向的10K电阻器,随着摇杆方向不同,抽头的阻值随着变化.本模块使用5V供电( ...

  9. pyhton中matplotlib箱线图的绘制（matplotlib双轴图、箱线图、散点图以及相关系数矩阵图)）

    //2019.07.23 1.箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,它主要包含五个基础数据:中位数,两个上下分位数以及上下边缘线数据 其中的一 ...

随机推荐

  1. [转c#]记录程序耗时的方法

    多时候需要输出程序耗时,然后记录下来, 总是在程序执行开始记录当前时间点,在结尾记录结束时间点,然后两个时间相减,   那么有没有其他稍微像样点的方法呢?  告诉你,有滴 ; )   这个方法主体就是 ...

  2. Azure 进阶攻略 | 上云后的系统，「门禁」制度又该如何实现？

    各位办公室白领们,不妨回想一下自己每天去公司上班时的一些细节. 为避免「闲杂人等」进入工作场所,我们需要证明自己是这家公司的员工才能进入,对吧!所有员工,无论所属部门或职位,都必须先证明自己身份,例如 ...

  3. Azure 6 月新公布

    Azure 6 月新发布:磁盘加密预览版 , CDN 用户上传 HTTPS 自有证书及价格调整. Azure 磁盘加密预览版现已在中国发布 Azure 磁盘加密预览版已对 Azure 中国云地区的 W ...

  4. 概念：静态static相关知识

    在面向对象中,有‘静态’概念,通过关键字static进行说明, 例如: 静态属性:public static $name = '小仓鼠' 静态方法:public static function Nam ...

  5. Bonita portal 源码编译（未完成）

    首先下载源代码 https://github.com/bonitasoft/bonita-portal-js 以下内容为Github 的安装教程包含我安装过程中遇到的问题.并加以修正 Bonita p ...

  6. cesium 加载倾斜摄影模型（这里有一坑）

    代码如下: // Construct the default list of terrain sources. var terrainModels = Cesium.createDefaultTerr ...

  7. 计算多项式Poj(1996)

    题目链接:http://poj.org/problem?id=1996 思路: 刚开始打了个二维表,调了一个小时,爆内存了. #include <stdio.h> #include < ...

  8. nodejs 的一些PHP函数库

    http://locutus.io/php/ nodejs 的一些PHP函数库 PHP extensions in JavaScript array array_change_key_case arr ...

  9. 利用python的numpy创建矩阵并对其赋值

    创建一个3X3的矩阵并对其赋值: x = numpy.array([[1,2,3],[4,5,6],[7,8,9]]) print x print x.shape 运行结果: [[ ] [ ] [ ] ...

  10. javascript原生API总结

    一.查找: getElementById() 方法返回带有指定 ID 的元素(唯一): getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组). ...