<%@ 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. LeetCode Merge Two Sorted Lists 归并排序

      题意: 将两个有序的链表归并为一个有序的链表. 思路: 设合并后的链表为head,现每次要往head中加入一个元素,该元素要么属于L1,要么属于L2,可想而知,此元素只能是L1或者L2的首个元素, ...

  2. Dll注入：X86/X64 远程线程CreateRemoteThread 注入

    远线程注入原理是利用Windows 系统中CreateRemoteThread()这个API,其中第4个参数是准备运行的线程,我们可以将LoadLibrary()填入其中,这样就可以执行远程进程中的L ...

  3. linux 命令——32 gzip(转）

    减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用.gzip不仅可以用 ...

  4. JavaScript:理解worker事件api

    如果你不是很了解Event事件,建议先看我上一篇随文javascript:理解DOM事件.或者直接看下文worker api. hack 首先,我们需要实例一个Worker的对象,浏览器会根据新创建的 ...

  5. NYOJ-255-C小加 之 随机数

    原题链接 C小加 之 随机数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 ACM队的“C小加”同学想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用 ...

  6. TensorFlow 内置重要函数解析

    概要 本部分介绍一些在 TensorFlow 中内置的重要函数,了解这些函数有时候更加方便我们进行数据的处理或者构建神经网络. 这些函数如下:       tf.one_hot()     tf.ra ...

  7. springboot集成shiro的session污染问题

    问题起因是这样的,有两套系统,系统a和系统b.两套系统均使用shiro做的权限管理,之前部署在两台机器上.使用浏览器打开a系统后另开页签打开b系统,互不干扰都能正常使用,后因业务迁移,两套系统部署到了 ...

  8. vue中的过滤器

    过滤器 过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应 ...

  9. 完结篇OO总结

    目录 前言 一.第四单元两次架构设计 二.架构设计及OO方法理解的演进 三.测试理解与实践的演进 四.课程收获 五.改进建议 前言 持续了17周的OO终于走向了尾声,想想寒假的时候连类都不知道是什么, ...

  10. JQuery从服务器端取得数据绑定到dropdownlist（select）中

    http://blog.csdn.net/gaofang2009/article/details/5840783 http://www.cnblogs.com/Mac_Hui/archive/2010 ...