<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HC._Default" %>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>无标题页</title>

    <script src="HighChart/jquery-1.5.2.min.js" type="text/javascript"></script>

    <script src="HighChart/highcharts.js" type="text/javascript"></script>

    <script src="HighChart/theme/grid.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var chart;

            chart = new Highcharts.Chart({

                chart: {

                    renderTo: 'container',          //放置图表的容器

                    plotBackgroundColor: null,

                    plotBorderWidth: null,

                    zoomType: 'xy' //支持图表放大缩小的范围

                },

                title: {

                    text: '支持放大功能的双Y轴线性柱状混合图以及自行格式化y轴刻度示例'

                },

                subtitle: {

                    text: '短信发送数与成功率'

                },

                xAxis: [{

                    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],

                    labels: {

                        rotation: -, //字体倾斜

                        align: 'right',

                        style: { font: 'normal 13px 宋体' }

                    }

                }],

                yAxis: [{ // Primary yAxis

                    title: {

                        text: '成功率 (%)',

                        style: {

                            color: '#89A54E'

                        }

                    },

                    labels: {

                        format: '{value} 条',//格式化Y轴刻度

                        style: {

                            color: '#89A54E'

                        }

                    }

                    ,

                    max:

                }, { // Secondary yAxis

                    title: {

                        text: '发送数 (条)',

                        style: {

                            color: '#4572A7'

                        }

                    },

                    labels: {

                        format: '{value} %',

                        style: {

                            color: '#4572A7'

                        }

                    },

                    opposite: true

                }],

                tooltip: {

                    shared: true, //公用一个提示框

                    formatter: function() {

                        return this.x +"<br>"

                           + "<span style='color:#4572A7'>发送数：" + this.points[].y +" 条</span><br>"

                           + "<span style='color:#89A54E'>成功率：" + this.points[].y +" %</span>"

                        ;

                    }

                },

                //图例样式设置

                legend: {

                    layout: 'vertical',

                    align: 'left',

                    x: ,

                    verticalAlign: 'top',

                    y: ,

                    floating: true,

                    backgroundColor: '#FFFFFF'

                },

                series: [{

                    name: '发送数',

                    color: '#4572A7',

                    type: 'column',

                    yAxis: ,

                    data: [, , , , , , ],

                    tooltip: {

                        formatter: function() {

                            return this.y +"条";

                        }

                    }  

                }, {

                    name: '成功率',

                    color: '#89A54E',

                    type: 'spline',

                    yAxis: ,

                    data: [, 22.5, , , , ,  ],

                    tooltip: {

                        valueSuffix: ' %'

                    }

                }]

            });

        });

    </script>

</head>

<body>

<form id="form1" runat="server">

    <div id="container">

    </div>

</form>

</body>

</html>

HighCharts实现双Y轴的更多相关文章

  1. highchart 设置双Y轴坐标 双x轴坐标方法

    我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...

  2. 绘制复数图形和双y轴图形

    clearclct=0:0.1:2*pi;x=sin(t);y=cos(t);z=x+i*y;subplot(1,3,1)plot(t,z,'r') %注:这种方式下,不论参数t,z哪个是复数,都将忽 ...

  3. Jqplot使用总结之二(双Y轴)

    最近需要用Jqplot做双Y轴的Chart图,首先我找到了文档上的例子并对数据做了一些调整: 1.例子展示: var s1 = [["2002-01-01", 112000], [ ...

  4. MSChart使用之双Y轴使用

    protected void SearchChart() { Chart1.ChartAreas.Clear(); Chart1.Series.Clear(); ChartArea _ChartAre ...

  5. echarts使用笔记四:双Y轴

    1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...

  6. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  7. Python科学计算技巧积累四——双y轴图像绘制

    双y轴图像具有单y轴图像没有的对比效果,在MATLAB中有plotyy函数可以实现,Python的实现方式没有MATLAB那样方便,不过实现效果却也不见得差. 以往我常用的绘图命令是import ma ...

  8. 【Python】matplotlib 双y轴绘制及合并图例

    1.双y轴绘制 关键函数:twinx() 问题在于此时图例会有两个. # -*- coding: utf-8 -*- import numpy as np import matplotlib.pypl ...

  9. matlab画二维直方图以及双y轴坐标如何修改另一边y轴的颜色

    1.首先讲一下如何用hist画二维直方图 x=[- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...

随机推荐

  1. Cloneable接口的作用

    Cloneable接口是一个[标记接口],就是没有任何内容 implements Cloneable表示该对象能被克隆,能使用Object.clone()方法.如果没有implements Clone ...

  2. Weblogic 10.3.6.0 集群搭建

    Weblogic 集群搭建 Oracle的Weblogic分开发者版本和生产版本,有32位和64位.一般生产版本的weblogic是64位的,安装文件是一个大小为1G多的jar包.去oracle官网上 ...

  3. C#之razor

    学习的文章在这里:http://www.cnblogs.com/yang_sy/archive/2013/08/26/ASPNET_MVC_RAZOR_ENGINE.html 1.视图开始文件_Vie ...

  4. [译文]详细解析如何做一款成功的APP应用

    译者注: 本文作者从自身丰富的应用开发设计实践经验和大量的优秀应用实例中,总结提炼了从产品概念.设计.开发到市场推广等一系列的相关原则,指导移动开发人员怎样来打造一款成功赚钱的应用.姗姗来迟的这篇文章 ...

  5. 欠采样（undersampling）和过采样（oversampling）会对模型带来怎样的影响

    项目中出现了二分类数据不平横问题,研究总结下对于类别不平横问题的处理经验: 为什么类别不平横会影响模型的输出? 许多模型的输出类别是基于阈值的,例如逻辑回归中小于0.5的为反例,大于则为正例.在数据不 ...

  6. python_45_目录编程

    #获取当前目录 import os print(os.getcwd()) #获取目录内容 import os print(os.listdir('C:\\Python27')) #创建目录 impor ...

  7. theano 模块 MLP示例

    theano 模块 MLP示例,有需要的朋友可以参考下. theano教程Example: MLP: 约定数组为列向量, 层级:将多层传感器定义为一连串的层级,每个层级定义为一个类.类属性包括:权重. ...

  8. oracle安装报错[INS-30131]执行安装程序验证所需的初始设置失败（无法访问临时位置）解决方法！

    最近在电脑上安装oracle12c,安装时,在执行检查环境步骤时候报错: [INS-30131]执行安装程序验证所需的初始设置失败(无法访问临时位置) 最后在网上搜索解决方法,特记录下,以防以后再用到 ...

  9. servlet层调用biz业务层出现浏览器 500错误，解决方法 dao数据访问层 数据库Util工具类都可能出错 通过新建一个测试类复制代码逐步测试查找出最终出错原因

    package com.swift.jztk.servlet; import java.io.IOException; import javax.servlet.ServletException; i ...

  10. getchar输入多行字符，原格式输出（包含换行符）

    #include<stdio.h> int main() { FILE fp; ]; ; char ch; while((ch=getchar())!=EOF){ str[k++]=ch; ...