<%@ 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. [VC]socket含义

    两个程序之间的通信方法.Socket 是一种识别码,应用程式可用此唯一识别通信端点.用户创建 Socket 地址与Socket 的关联性后,便可创建通信协议地址与Socket 的关联性.

  2. UVA Live Achrive 4327 Parade (单调队列,dp)

    容易想到dp[i][j]表示在第i行j个路口的开始走最大高兴值. 每次可以向左走,或者向右边走,然后向北走.(或者直接往北) 向左走到,状态转移为dp[i][j] = dp[i][k] + happy ...

  3. mongostat查看mongodb运行状态使用命令介绍

    mongostat是mongodb自带的一个用来查看mongodb运行状态的工具 使用说明 mongostat -h   字段说明 启用后的状况是这样的 insert query update del ...

  4. 2018.5.22 Oracle安装配置在虚拟机中外部电脑连接服务

    1.拷贝老师的集成文件(win系统和oracle服务) 2.安装虚拟机,并且打开镜像文件 3.启动监听程序(实例服务[自动].监听服务) 4.查看虚拟机ip,此ip要主机ip在同一个网段 5.检查虚拟 ...

  5. 完全用 Linux 工作

    GNU/Linux 不是每個人都想用的.如果你只需要處理一般的事務,玩遊戲,那就不需要了解 Linux. UNIX 比 Windows 更適合用於科學研究工作. 大多數科學家和工程師以 UNIX 作為 ...

  6. Redis学习记录(一)

    在学习Redis之前,要知道什么是NoSQL? 1.NoSQL 1.1. 什么是NoSQL NoSQL(NoSQL = Not Only SQL),表示“不仅仅是SQL”,泛指非关系型数据库. 1.2 ...

  7. 梁勇Java语言程序设计第三章全部例题 为第五次作业

    完成例题3-1,通过系统当前时间毫秒值获取随机10以内的整数判断加的结果是否正确,不用if语句 package com.swift; import java.util.Scanner; public ...

  8. 驾考试题的json代码

    { "statusCode": "000000", "desc": "请求成功", "result" ...

  9. zabbix告警时间和恢复时间相同的解决方法

    出现原因:在动作,恢复操作中,恢复时间成了{EVENT.DATE} {EVENT.TIME},所以和告警时间相同. 解决方法:将{EVENT.DATE}{EVENT.TIME}改成{EVENT.DAT ...

  10. ELFhash - 优秀的字符串哈希算法

    ELFhash - 优秀的字符串哈希算法 2016年10月29日 22:12:37 阅读数:6440更多 个人分类: 算法杂论算法精讲数据结构 所属专栏: 算法与数据结构   版权声明:本文为博主原创 ...