<%@ 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. label+input实现按钮开关切换效果

    label+input实现按钮开关切换效果 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  2. 关于echarts和jqeury的结合使用问题

    今天在工作上遇到了一个小问题,就是自己在用echarts渲染了一个柱状图,然后点击其他位置,将渲染echart的div进行了清空,这里我所有的echart图形都是在同一个div中渲染的,然后当再次要求 ...

  3. 云为 | 提供海外 IT 人才派遣、猎头、人力资源外包服务

    云为是大连信为软件开发有限公司为人力资源外包服务创建的品牌,是中国专业的人力资源外包领域的服务商,在信息技术行业为海外企业雇主招聘合格.专业且技能熟练的精英人士.我们的客户涵盖了日本上市公司和​​株式 ...

  4. SpringBoot的特性

    SpringBoot的理念“习惯优于配置” 习惯优于配置(项目中存在大量的配置,此外还内置了一个习惯性的配置,无须手动进行配置) 使用SpringBoot可以方便地创建独立运行.准生产级别的基于Spr ...

  5. vue的MVVM模式和生命周期总结（一）

    一.MVVM模式 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel ...

  6. Graylog+elasticsearch+mongodb集群+nginx负载均衡前端

    网上有张图画的很好,搜索有关它的配置文章,google里有几篇英文的,都是依靠haproxy等或别的什么实现,没有纯粹的Graylog+elasticsearch+mongodb集群,项目需要,只有自 ...

  7. java Vamei快速教程22 内存管理和垃圾回收

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 整个教程中已经不时的出现一些内存管理和垃圾回收的相关知识.这里进行一个小小的总结. ...

  8. 小弟在研究CUDA时出现一个问题，求解

    这是<GPU高性能编程CUDA中文实战>中的例子,第七章,热传导模拟,但是出现下面的问题,求牛人解读.小弟跪谢... 主要问题就是关键字变白. 但是添加需要的头文件后一些系统自带的关键字也 ...

  9. linux 环境能变量配置

    1, 3.配置环境变量 在/etc/profile文件末尾中添加以下环境变量:(我上面的JDK目录是jdk1.6.0_45,所以下面JAVA_HOME中也是这个) export JAVA_HOME=/ ...

  10. linux中管道(pipe)一谈

    /*********************************************** 管道(pipe)是Linux上进程间通信的一种方式,其是半双工(数据流只能在一个方向上流动(还需要经过 ...