<%@ 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: -45, //字体倾斜
align: 'right',
style: { font: 'normal 13px 宋体' }
}
}],
yAxis: [{ // Primary yAxis
title: {
text: '成功率 (%)',
style: {
color: '#89A54E'
}
},
labels: {
format: '{value} 条',//格式化Y轴刻度
style: {
color: '#89A54E'
}
}
,
max: 100
}, { // 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[0].y +" 条</span><br>"
+ "<span style='color:#89A54E'>成功率：" + this.points[1].y +" %</span>"
;
}
},
//图例样式设置
legend: {
layout: 'vertical',
align: 'left',
x: 0,
verticalAlign: 'top',
y: 0,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: '发送数',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [50, 70, 100, 120, 145, 176, 135],
tooltip: {
formatter: function() {
return this.y +"条";
}
}
}, {
name: '成功率',
color: '#89A54E',
type: 'spline',
yAxis: 0,
data: [80, 22.5, 45, 90, 99, 35, 45 ],
tooltip: {
valueSuffix: ' %'
}
}]
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
</div>
</form>
</body>
</html>
相关推荐
利用C#实现双Y轴的WinForm程序——在使用MSChart控件时有时需要画出多个Y轴，尽管MSChart本身提供了主Y轴和辅Y轴
之前用matlab画图的时候，想画一个双x轴单Y轴图像，自己写了好久都没有实现，最后在matlab的官网上找到了这个函数，可以实现双X轴双Y轴的绘图，然后就可以利用ax.Yaxixs.Visible='off',就可以隐藏一个Y轴实现双X轴，...
Python 在通用应用程序、自动化插件、网站、网络爬虫、数值分析、科学计算、云计算、大数据和网络编程等领域有着极为广泛的应用，像 OpenStack 这样的云平台就是由 Python 实现的，许多平台即服务（PaaS）产品都支持...
今天小编就为大家分享一篇python matplotlib实现双Y轴的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VS中提供的MSChart控件功能强大，但是最多只支持2个Y轴。在实际运用中，有的时候需呀Chart有多个Y轴，本Demo实现了MSChart的多Y轴实现，给大家分享。
公司业务需要需要做一个双X双Y的图形报表，之前研究过很多例子结合把双X轴不等分显示； 1、有曲线图、有柱状图 2、X轴分组合并显示 3、可自行修改显示数值和比例在一个图上
基于MATLAB的双Y轴坐标系画图，很多时候不同的因素数量级差别很大，又想放到同一个图上进行画图展示曲线走势的相关性，这个时候就需要用到双轴坐标系，一个用于数量级较大的，一个用于数量级小的，本代码可以实现双...
主要介绍了实现ECharts双Y轴左右刻度线一致的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用C#创建多个Y轴参考坐标系,创建多个坐标系内容。
在开发过程中可能会遇到把数据显示在同一个坐标轴中，但是x，y轴的数据单位不一样
项目中需要FusionCharts图表显示双Y轴，好像FCF_MSLine.swf不可以这样，只能显示一个Y轴，多条线,找了一下，用MSCombiDY2D.swf可以实现,现在晒出来和大家分享一下
WinCC 自定义 XY 轴的多功能曲线的实现方法
通过将两个数据集上的值标准化为 0 到 1，将它们绘制为一个分组条形图，添加第二个 y 轴，然后修改 y 轴刻度来绘制 2 轴条形图。 bar1 & bar2 是列向量。 如果错误不为空（预期的 2 行向量与 numbars 大小相同），...
本例通过图形管理界面实现一个X轴上添加多个Y轴，并设计不同的显示区域进行显示，使图形界面展示更加方便，美观。(感谢teechart技术交流群254805448群友的无私技术交流)
用MATLAB实现三角函数曲线、双5y轴图形的绘制、单个轴窗口显示多个图形等，对初学者非常实用
R一张图绘制多个曲线，实现一张图绘制多个曲线。双Y轴