<!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. unity工具介绍

    MemoryProfiler内存分析工具 行为树 behaviac github 场景动画编辑器 Snapdragon Profiler性能分析工具 VTune性能分析器 protobuf数据交换格式 ...

  2. js报错 object is not a function

    主要是js函数名重名了,重命名就可以了.

  3. 【QT】Qaction和触发函数建立连接的方法

    说明:我是在ui里面编辑好控件以及位置,然后在程序里面将控件和触发函数进行绑定,实现的触发操作. 代码如下: MainWindow::MainWindow(QWidget *parent) : QMa ...

  4. 2017.10.28 QB模拟赛 —— 下午

    题目链接 T1 按x值排序 遇到第二种牌插入 遇到第一种牌 查询<=y 的最小值 删除他 splay multiset cys大佬说 multiset就是不去重的set, #include &l ...

  5. mysql全部基本数据类型

    MySQL基本数据类型统计http://www.cnblogs.com/xuqiang/archive/2010/10/14/1953464.html 详细介绍http://www.cnblogs.c ...

  6. Android（java）学习笔记64：Android权限大全

    访问登记属性 android.permission.ACCESS_CHECKIN_PROPERTIES读取或写入登记check-in数据库属性表的权限 获取错略位置 android.permissio ...

  7. Cydia Tweak--Cydia Substrate

    http://www.jianshu.com/p/8982e9670fc6 Cydia Substrate.MobileHooker MSHookMessageEx MSHookFunction Mo ...

  8. 简单的Nodejs模块

    说千遍,道万遍,不如动手做一遍,我们实现一个node所谓的模块 看下上面的图,了解一下模块自始至终的一个流程,首先是创建模块,也就是一个入口的js文件,里面加了一些特定的功能,然后导出这个模块, ex ...

  9. 【转】Android UI开发第二十四篇——Action Bar

    Action bar是一个标识应用程序和用户位置的窗口功能,并且给用户提供操作和导航模式.在大多数的情况下,当你需要突出展现用户行为或全局导航的activity中使用action bar,因为acti ...

  10. bootstrap suggest搜索建议插件

    近日因工作需要看了下此插件. 首先下载bootstrap js包.添加此插件的引用.注意css样式要引用,不能忘记. 前台页面代码,因为楼主做的是选项卡切换查询不同的结果. <tr> &l ...