<!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. angularjs ng-if 慎用 备忘

    ng-if.ng-show一般情况下可以通用,二者的最明显区别就是: ng-if判断为false时,页面dom节点不会被创建,其子节点下也不会渲染,从而也就加快了dom的加载速度:ng-show则仅是 ...

  2. GitHub教程(三) 本地仓库托管到GitHub

    本文开头先特别声明一下:由于GitHub教程属于Git系列教程的GitHub子篇章,因此GitHub教程中将不再详细介绍Git操作命令及其用法,我会根据实际需要穿插着回顾Git操作命令.如果读者需要学 ...

  3. python3绘图示例2（基于matplotlib：柱状图、分布图、三角图等）

    #!/usr/bin/env python# -*- coding:utf-8 -*- from matplotlib import pyplot as pltimport numpy as npim ...

  4. CentOS6.8上安装epel

    实验环境: [root@bogon zhi]# uname -a Linux bogon -.el6.i686 # SMP Fri Nov :: UTC i686 i686 i386 GNU/Linu ...

  5. Element-ui（el-table、el-pagination）实现表格分页

    HTML代码:(重点关注el-table中:data数据的绑定) el-pagination中: layout代表组件布局,子组件名用逗号分隔 属性: total代表总条目数 事件: current- ...

  6. 初识Python（三）

    一.作用域 对于变量的作用域,执行声明并在内存中存在,该变量就可以在后续的代码中使用: 外层变量,可以被内层变量使用:内层变量,也可以被外层变量使用: 如下示例: #!/usr/bin/env pyt ...

  7. vs下如何调试Dll

    1.首先需要一个exe加载你的dll 2.dll项目的属性设置 3.将dll设为启动项 4.在dll中设置断点 F5就可以调试了

  8. April 28 2017 Week 17 Friday

    The only thing more painful than learning from experience is not learning from experience. 比从经验中学习更为 ...

  9. java日期时间Date类

    java.util包提供了Date类来封装当前的日期和时间. Date类提供两个构造函数来实例化Date对象. 第一个构造函数使用当前日期和时间来初始化对象. Date( ) 第二个构造函数接收一个参 ...

  10. 使用Excel调用ABAP系统的函数

    效果:在excel里创建一个按钮,开发一些VB script,可以连接指定的ABAP系统并执行系统里的ABAP function module. 在这里例子里执行ABAP系统的函数TH_USER_LI ...