<%@ 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#语言和MSChart控件在WinForm环境中实现双Y轴的程序。 首先，MSChart是.NET Framework中用于创建图表的强大工具，它提供了丰富的功能来满足各种图表需求。要创建双Y轴的图表，我们需要理解...
如果它是源代码文件，那么打开并学习它将帮助我们理解如何在实际项目中实现双Y轴功能。 总之，`ChartControl`的双Y轴显示功能是一种强大的数据可视化手段，它能帮助用户在同一图表上直观地对比不同范围的数据。通过...
JFreeChart双Y轴折线图实例，可以直接运行，实例类为LineChartDemo1.JAVA，有注释。 若想在web工程使用只需如下。 String filename = ServletUtilities.saveChartAsPNG(jfreechart, 600, 400, null, session); ...
在JavaScript中，实现双y轴统计图有多种库可供选择，如D3.js、Chart.js、Highcharts等。这些库提供了丰富的API和配置选项，让我们能够定制出满足需求的图表。 1. D3.js（Data-Driven Documents）：这是一个强大的...
之前用matlab画图的时候，想画一个双x轴单Y轴图像，自己写了好久都没有实现，最后在matlab的官网上找到了这个函数，可以实现双X轴双Y轴的绘图，然后就可以利用ax.Yaxixs.Visible='off',就可以隐藏一个Y轴实现双X轴，...
在【标题】"JFreeChart 双坐标Y轴 折点显示数据"中，所涉及的知识点是JFreeChart如何实现双Y轴坐标系以及在折点处显示数据的技巧。 首先，双Y轴坐标系常用于对比不同尺度的数据，例如一个数据系列的值范围可能远...
在本篇博客中，"JfreeChart画双Y轴折线图"的主题，将探讨如何使用JFreeChart库来创建具有两个独立Y轴的折线图，这对于显示不同尺度或单位的数据对比非常有用。 首先，我们需要了解JFreeChart的基本结构。JFreeChart...
3. **双Y轴设置**：在Matplotlib中，可以通过创建两个轴实例（`ax1`和`ax2`）并指定共享x轴来实现双Y轴。`twinx()`函数用于创建第二个Y轴，它与第一个轴共享相同的x轴。 4. **数据绘图**：使用`ax.plot()`函数分别在...
这个项目，"基于achartengine双Y轴动态图表Android源码"，专门关注如何在同一个图表上使用两个不同的Y轴来显示数据，这对于对比不同尺度的数据或者展示相关但单位不同的数据非常有用。 `achartengine`库提供了丰富...
在给定的“双Y轴折线图(原创)”项目中，我们可以看到作者对这种图表的实现，这可能是使用Achartengine库进行的。 Achartengine是一个流行的开源Java库，主要用于创建各种类型的图表，如折线图、饼图、条形图等，...
### Python Matplotlib 实现双 Y 轴的实例解析 #### 一、引言 在数据分析与可视化领域，经常需要在同一图表中展示不同单位或量级的数据系列，以直观地对比它们之间的关系。Matplotlib 是 Python 中最常用的数据...
然而，在某些复杂的数据显示场景中，可能需要展示更多维度的数据，这就需要实现多Y轴的功能。本Demo通过自定义扩展，成功地实现了在MSChart上显示多个Y轴。 首先，我们需要理解MSChart的基本结构。MSChart由多个...
Python 在通用应用程序、自动化插件、网站、网络爬虫、数值分析、科学计算、云计算、大数据和网络编程等领域有着极为广泛的应用，像 OpenStack 这样的云平台就是由 Python 实现的，许多平台即服务（PaaS）产品都支持...
这个"Winform中实现ZedGraph的多条Y轴示例代码"就是一个很好的教程，它展示了如何利用ZedGraph库在Winform应用中创建带有多个Y轴的图表。 首先，我们来理解一下ZedGraph库。ZedGraph是一个完全开源的.NET类库，专门...
公司业务需要需要做一个双X双Y的图形报表，之前研究过很多例子结合把双X轴不等分显示； 1、有曲线图、有柱状图 2、X轴分组合并显示 3、可自行修改显示数值和比例在一个图上
### 交流Origin中绘制双Y轴曲线图（柱形图）的方法 #### 一、引言 在学术研究中，为了更直观地展示不同数据集之间的对比与关联，经常需要绘制双Y轴的曲线图或柱形图。Origin是一款功能强大的科学绘图与数据分析软件...
在这个特定的场景中，我们关注的是如何使用Highcharts来绘制一个具有双Y轴的折线图，并且这两条折线不会交叉，同时根据日期设置分割线，而且要确保在旧版本的IE浏览器（如IE8）中也能正常工作。 首先，我们需要了解...
本文将深入讲解如何在Android中实现双Y轴坐标系的折线图，以满足对复杂数据的直观展示需求。参考链接为：[http://blog.csdn.net/monkey\_king\_bar/article/details/49815463]...