HighCharts实现双Y轴
<%@ 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轴的更多相关文章
- highchart 设置双Y轴坐标 双x轴坐标方法
我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...
- 绘制复数图形和双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哪个是复数,都将忽 ...
- Jqplot使用总结之二(双Y轴)
最近需要用Jqplot做双Y轴的Chart图,首先我找到了文档上的例子并对数据做了一些调整: 1.例子展示: var s1 = [["2002-01-01", 112000], [ ...
- MSChart使用之双Y轴使用
protected void SearchChart() { Chart1.ChartAreas.Clear(); Chart1.Series.Clear(); ChartArea _ChartAre ...
- echarts使用笔记四:双Y轴
1.双Y轴显示数量和占比 app.title = '坐标轴刻度与标签对齐'; option = { title : { //标题 x : 'center', y : 5, text : '数量和占比图 ...
- Highcharts属性与Y轴数据值刻度显示Y轴最小最大值
Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...
- Python科学计算技巧积累四——双y轴图像绘制
双y轴图像具有单y轴图像没有的对比效果,在MATLAB中有plotyy函数可以实现,Python的实现方式没有MATLAB那样方便,不过实现效果却也不见得差. 以往我常用的绘图命令是import ma ...
- 【Python】matplotlib 双y轴绘制及合并图例
1.双y轴绘制 关键函数:twinx() 问题在于此时图例会有两个. # -*- coding: utf-8 -*- import numpy as np import matplotlib.pypl ...
- matlab画二维直方图以及双y轴坐标如何修改另一边y轴的颜色
1.首先讲一下如何用hist画二维直方图 x=[- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...
随机推荐
- Ajax 使用 FormData做为data的参数时 出现Illegal invocation
今天在用ajax向后台传递数据时出现此错误,在ajax的参数中加上 contentType: false, processData: false, 这两句即可.
- Vue日历
Vue生成日历,根据返回值将日期标红 HTML: <h1>CSS 日历</h1> <div id="calendar"> <div cla ...
- xaml实现无边框窗口
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/w ...
- JSON.parse() 和 JSON.stringify()的简单介绍
参考地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse ht ...
- 使用腾讯IP分享计划网站中的纯JS省市区三级联动
JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...
- linux中python安装
1.查看当前环境中是否存在python安装包 [zyj@localhost ~]$ rpm -qa | grep python gnome-python2-gnome--.el6.x86_64 pyt ...
- LeetCode Excel Sheet Column Number 表列数
题意:天啊!我竟然看不懂题意,还去翻别人的代码才懂!给定一个字符串,求该字符串二十六进制的总值. 思路:'A'~'Z'就是1到26,"AA"=26+1=27,"BA&qu ...
- C语言——字符串长度的计算方法
1.不带转义字符的字符串 如:“abc!x=/”,其长度为7 2.带转义字符的字符串 (1) 字符串“abc\n”:其中的'\n'为转义字符(换行符),计算字符串长度时只能计作一个字符,所以该字符串的 ...
- X86/X64 函数调用约定
C 语言有 __cdecl.__stdcall.__fastcall.naked.__pascal. C++ 语言有 __cdecl.__stdcall.__fastcall.naked.__pasc ...
- POJ 3734 Blocks （线性递推）
定义ai表示红色和绿色方块中方块数为偶数的颜色有i个,i = 0,1,2. aij表示刷到第j个方块时的方案数,这是一个线性递推关系. 可以构造递推矩阵A,用矩阵快速幂求解. /*********** ...