<%@ 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. laydate 显示结束时间不小于开始时间

    jsp: <div class="form-group">    <label >交易时间:</label>        <input ...

  2. 构建第一个Spring Boot2.0应用之集成mybatis、Druid（七）

    一.环境: IDE:IntelliJ IDEA 2017.1.1 JDK:1.8.0_161 Maven:3.3.9 springboot:2.0.2.RELEASE 二.说明:      本文综合之 ...

  3. Eucalyptus管理页面密码设置

    桉树环境什么的都已经是配置好了的,但是过了一段时间不用,也不知道密码是什么了,看着下面的页面也不知道如何进去,这里我们通过命令行的方式重置用户名和密码信息. 登陆clc所在机器,输入下命令: euar ...

  4. MySQL-5.6.30 (OpenLogic CentOS7.2)

    平台: CentOS 类型: 虚拟机镜像 软件包: centos7.2 mysql5.6.30 basic software database linux open source 服务优惠价: 按服务 ...

  5. ubuntu openstack windows 镜像制作

    openstack  windows 镜像制作 首先下载windows所需要的驱动,virtio-win-1.1.16.vfd virtio-win-0.1-59.iso 下载的官方地址是: http ...

  6. 使用RichTextBox控件保存文件

    实习效果: 知识运用: RichTextBox控件的SaveFile方法 SaveFileDialog对象的ShowDialog方法 实现代码: private void 打开RTF文件ToolStr ...

  7. scikit-learn 中 OneHotEncoder 解析

    概要 在 sklearn 包中,OneHotEncoder 函数非常实用,它可以实现将分类特征的每个元素转化为一个可以用来计算的值.本篇详细讲解该函数的用法,也可以参考官网 sklearn.prepr ...

  8. Java设计模式学习——设计原则

    第一章 设计原则 1.开闭原则 一个软件实体,像类,模块,函数应该对扩展开放,对修改关闭 在设计的时候,要时刻考虑,让这个类尽量的好,写好了就不要去修改.如果有新的需求来,在增加一个类就完事了,原来的 ...

  9. C#自减运算符

    一.C#自减运算符(--) 自减运算符(--)是将操作数减1. 1. 前缀自减运算符 前缀自减运算符是“先减1,后使用”.它的运算结果是操作数减1之后的值. 例如: --x;  // 前缀自减运算符 ...

  10. Angular2的笔记

    1.如果启动项目的时候出现下列黄色的警告说明电脑安装的全局cli和项目中使用的cli版本不一致,不过不影响使用,按它的提示执行 ng set --global warnings.versionMism ...