<!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. Android 接入支付宝支付实现

    接上篇android接入微信支付文章,这篇我们带你来接入支付宝支付服务 简介 首先要说明的是个人感觉接入支付宝比微信简单多了,很轻松的,所以同学们不要紧张~ 当然还是老规矩啦,上来肯定的贴上官网地址, ...

  2. .net 控制器调用外部链接传参方法

    public class RequestHelper { /// <summary> /// 发起post请求 /// </summary> /// <typeparam ...

  3. vos设置可呼出手机或固话

    问题: 默认公司只让呼出手机号码,但有的客户要求能打固话,怎么办? 落地网关——补充设置——落地前缀——落地被叫改写规则 在改写规则里添加固话号段即可 具体案例: 5201——1表示让520号段只能拨 ...

  4. Win10技巧：使用“照片”应用剪辑视频、添加特效

    Win10内置了很多实用的应用,你不仅可以通过“Win键+G”快速录制电脑屏幕,如软件操作.游戏界面等,你还可以利用“照片”应用来对视频进行快速的剪辑,把录制前后多余的内容去除,同时你也可以对游戏中的 ...

  5. ARM实验4—按键轮询实验

    key_poll按键轮询实验 实验内容: 通过FS_4412开发板上的按键控制LED灯并打印信息. 实验目的: 熟悉开发环境的使用. 掌握猎户座4412处理器的GPIO接口, 实验平台: FS4412 ...

  6. 页面dom事件防止失效的一种写法

    经常我们写事件是这样的 $('.day').on('click', function () { some(); }); 但是这样在spa模式下经常容易出现页面切换后事件失效的问题, 可以采用这样的写法 ...

  7. vue.js 错误提示bash: vue: command not found

    在使用 vue init webpack vue-demo 进行demo的下载时,提示vue: command not found,原因是环境变量没有进行配置,所以会出现这个问题,解决办法 找到你安装 ...

  8. hdu-2838 Cow Sorting---逆序对的花费

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2838 题目大意: 就是求将之前的排列变成一个递增的排列,每交换两个数的代价为两个数的和,求变成递增的 ...

  9. python对表格的使用

    #!user/bin/env python # coding=utf- import xlrd def readExcelDataByName(filename, sheetName): '''读取E ...

  10. 20145238-荆玉茗 《Java程序设计》第一次实验报告

    实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没 ...