<!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. 图片延迟插件 Jquery.lazyload.min.js

    当一个页面打开的图片太多,我们可以用jquery的一个延迟加载插件.名为:jquery.lazyload.min.js 使用非常简单,如下: <div style="height:70 ...

  2. PHP设计模式之单例模式

    <?php #千锋PHP http://www.qfedu.com/php/? #千锋PHP http://www.qfedu.com/php/? namespace app; /** * Cl ...

  3. Android（java）学习笔记67：Android Studio新建工程中的build.gradle、settings.gradle

    随着信息化的快速发展,IT项目变得越来越复杂,通常都是由多个子系统共同协作完成.对于这种多系统.多项目的情况,很多构建工具都已经提供了不错的支持,像maven.ant.Gradle除了借鉴了ant或者 ...

  4. NYOJ(42)欧拉图

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=42 我是参考了红黑联盟的结题报告了的.但是有一个位置,应该是红黑联盟写错了吧,就是那个连通 ...

  5. 轻量级HTTP服务器Nginx(Nginx性能优化技巧)

    轻量级HTTP服务器Nginx(Nginx性能优化技巧)   文章来源于南非蚂蚁   一.编译安装过程优化 1.减小Nginx编译后的文件大小在编译Nginx时,默认以debug模式进行,而在debu ...

  6. nodejs 的一些PHP函数库

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

  7. Windows Thin PC(7月2日发布)下载+激活+汉化

    在7月2日Windows 7 瘦身版Windows Thin PC(WinTPC)完成了RTM版的编译开发,WinTPC是一个面向企业用户的产品,主要面向虚   拟桌面基础架构(VDI)消费者,Win ...

  8. VC-基础：VS2010/MFC-1MFC消息映射

    Windows消息分类 Windows消息分为系统消息和用户自定义消息.Windows系统消息有三种: 1.标准Windows消息.除WM_COMMAND外以WM_开头的消息是标准消息.例如,WM_C ...

  9. 高亮代码 SyntaxHighlighter

    SyntaxHighlighter: http://alexgorbatchev.com/SyntaxHighlighter/download/ demo <!DOCTYPE html PUBL ...

  10. lambda函数,内置map()函数及filter()函数

    8.1 lambda函数 作用及意义:  1.没必要专门定义函数,给函数起名,起到精简的效果  2.简化代码的可读性 def ds(x): return 2 * x + 1 ds(5) ---11 g ...