-
Echarts-双轴图
2019-02-15 15:18:59Echarts-双轴图1、问题描述
利用Echarts制作一个折线图,条件是:三条折线,一条代表可利用率,另外两条代表数量。
2、实现源码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Echarts-双轴图</title> <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"> <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script> <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script> <style> body,html{ width: 99%; height: 99%; font-family: "微软雅黑"; font-size: 12px; } #double{ width: 100%; height: 100%; font-family: "agency fb"; font-weight: bolder; } </style> <script> $(function(){ var chart = document.getElementById('double'); var echart = echarts.init(chart); var option = { title : { text: '可利用率', subtext: '', x: 'center', align: 'right' }, grid: { bottom: 80 }, tooltip : { trigger: 'axis', axisPointer: { animation: false }, formatter: function (params) { var res = params[0].name; for (var i = 0, l = params.length; i < l; i++) { if(i==0) { res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "%"; } else { res += '<br/>' + params[i].seriesName + ' : ' + params[i].value; } } return res; } }, legend: { data:['可利用率','A','B'], x: 'left' }, xAxis : [ { type : 'category', axisLabel: { rotate: 45 }, boundaryGap : false, axisLine: {onZero: false}, data : ['2016年1月', '2016年2月', '2016年3月', '2016年4月', '2016年5月','2016年6月','2016年7月','2016年8月','2016年9月','2016年10月','2016年11月','2016年12月'].map(function (str) { return str.replace(' ', '\n') }) } ], yAxis: [ { name: '可利用率', type: 'value', max: 100, axisLabel: { show: true, interval: 'auto', formatter: '{value} %' } }, { name: 'A', nameLocation: 'start', type: 'value', inverse: true }, { name: 'B', nameLocation: 'start', type: 'value', inverse: true } ], series: [ { name:'可利用率', type:'line', hoverAnimation: false, itemStyle: { normal: { label : { show:false, position:'top', formatter:'{c} %' } } }, areaStyle: { normal: {} }, lineStyle: { normal: { width: 1 } }, data:[12,78,34,67,88,45,65,77,31,21,90,54] }, { name:'A', type:'line', yAxisIndex:1, hoverAnimation: false, areaStyle: { normal: {} }, lineStyle: { normal: { width: 1 } }, data: [1,4,5,8,3,2,7,6,9,2,4,3] }, { name:'B', type:'line', yAxisIndex:1, hoverAnimation: false, areaStyle: { normal: {} }, lineStyle: { normal: { width: 1 } }, data: [0,2,3,7,1,0,5,2,6,1,2,1] } ] }; echart.setOption(option); }); </script> </head> <body> <div id="double"></div> </body></html>
3、实现结果再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow
-
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2020-10-20 05:32:31主要介绍了jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果,结合实例形式分析了jQuery使用HighCharts插件同时绘制柱状图、折线图的组合双轴图实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要... -
HighCharts之2D柱状图、折线图的组合双轴图
2014-03-29 23:30:00HighCharts之2D柱状图、折线图的组合双轴图 1、实例源码 DoubleAxis.html: HighCharts 2D柱状图、折线图的组合双轴图 $(function(){ $('#doubleColumnLineChart').highcharts({ chart: { ...HighCharts之2D柱状图、折线图的组合双轴图
1、实例源码
DoubleAxis.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D柱状图、折线图的组合双轴图</title> <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script> <script type="text/javascript" src="../scripts/js/highcharts.js"></script> <script type="text/javascript"> $(function(){ $('#doubleColumnLineChart').highcharts({ chart: { zoomType: 'xy' }, title: { text: '某城市的月平均温度和降雨量' }, xAxis: [{ categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'] }], yAxis: [{ // 主Y轴 labels: { format: '{value}°C', style: { color: '#89A54E', fontSize: '12px' } }, title: { text: '温度', style: { color: '#89A54E', fontSize: '12px' } } }, { // 次Y轴 title: { text: '降雨量', style: { color: '#4572A7' } }, labels: { format: '{value} mm', style: { color: '#4572A7' } }, opposite: true }], tooltip: { shared: true }, legend: { layout: 'vertical', align: 'left', x: 120, verticalAlign: 'top', y: 100, floating: true, backgroundColor: '#FFFFFF' }, series: [{ name: '降雨量', color: '#4572A7', type: 'column', yAxis: 1, data: [9.9, 51.5, 16.4, 129.2, 44.0, 76.0, 35.6, 148.5, 116.4, 104.1, 95.6, 154.4], tooltip: { valueSuffix: ' mm' } }, { name: '温度', color: '#89A54E', type: 'spline', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 35.2, 26.5, 13.3, 18.3, 13.9, 2.6], tooltip: { valueSuffix: '°C' } }] }); }); </script> </head> <body> <div id="doubleColumnLineChart" style="width: 1200px; height: 500px; margin: 0 auto"></div> </body> </html>
2、实例结果 -
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2020-10-20 06:58:05主要介绍了jQuery插件Echarts实现的双轴图效果,结合完整实例形式分析了Echarts插件制作双轴图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下 -
到底能不能用双轴图?!
2020-05-18 16:13:59一个分析师小伙伴跟我抱怨,老板是从Linkedin美国总部回来的,明令禁止团队使用双轴图,可怎么办呀... 双轴图作为一种常用的图表类型,确实在行业里争议不少。那么到底能不能使用双轴图呢? 双轴图的问题 双轴...一个分析师小伙伴跟我抱怨,老板是从Linkedin美国总部回来的,明令禁止团队使用双轴图,可怎么办呀...
双轴图作为一种常用的图表类型,确实在行业里争议不少。那么到底能不能使用双轴图呢?
双轴图的问题
双轴图被人诟病并不算冤枉,比如看下面左边的这张图,乍一眼看上去,是不是觉得女装的销售量和男装差不多嘛。
但其实是因为数据轴量级的不同,右边的图才是真实的情况,和女装相比,男装数据少的不值一提。
双轴图经常被误使用,当两个数据量级差异太大的时候,双轴图总是会被第一时间想起,但其实这种场景下不建议使用双轴图,因为有可能给人带来的误解实在太大了,而如果图表的浏览者基于这样错误的印象做了决策,带来的损失可能很严重呢。
如果这两组数据一定要放在一起看,还是建议分成2个线图,或者使用表格等方式展示。
那什么时候可以使用双轴图呢?
对于要同时查看一个数值和百分比的时间趋势,双轴图就派上大用场了。
比如要查看每天成交金额及其同比上周的变化率,比如要查看每天访问用户量及留存率,双轴图都非常适合。
为了浏览起来更直观,建议用柱图来表示数值类数据,用线图来表示百分比。
Quick BI 的双轴图
这里推荐一下我在用的Quick BI的双轴图,这里面的图表支持非常灵活的配置。
第一步:在图表类型中选择组合图
第二步配置度量、维度,
- 将“成交金额”拖入主值轴/度量
- 再拖入“成交金额”至副值轴/度量,修改为周同比,将显示方式修改为“线型”
- 将时间字段拖入类别轴/维度
第三步,点击更新,就完成配置了
作者:常成
-
matlab 折线图_MATLAB作图实例:13:折线图和条形图的双轴图
2020-12-04 15:04:26折线图和条形图的双轴图Combine Line and Bar Charts Using Two y-Axes本示例说明如何使用绘制折线图和条形图的双周图。它还显示了如何自定义线条和条形图。使用创建具有两个y轴的图表yyaxis。图形函数以图表的活动...折线图和条形图的双轴图Combine Line and Bar Charts Using Two y-Axes
本示例说明如何使用绘制折线图和条形图的双周图。它还显示了如何自定义线条和条形图。
使用创建具有两个y轴的图表
yyaxis
。图形函数以图表的活动面为目标。使用控制活动侧yyaxis
。使用左y轴绘制条形图。使用右y轴绘制折线图。将条形图系列对象和图表线对象分配给变量。days = 0:5:35; conc = [515 420 370 250 135 120 60 20]; temp = [29 23 27 25 20 23 23 17]; yyaxis left%控制左纵轴 b = bar(days,temp);%绘柱状图,赋值图形句柄给b yyaxis right%控制右纵轴 p = plot(days,conc);%绘折线图,赋值图形句柄给p
在图表中添加标题和轴标签。
title('Temperature and Concentration Data') xlabel('Day') yyaxis left%控制左纵轴 ylabel('Temperature (circC)') yyaxis right%控制右纵轴 ylabel('Concentration')
更改图表线的宽度并更改条形颜色。
p.LineWidth = 3;%设置线宽 b.FaceColor = [ 0 0.447 0.741];%设置柱面颜色
注:本文根据MATLAB官网内容修改而成。
我推荐给你以下的视频教程,特点是没有PPT,不掺水,直接编程环境下的实操课程: 用100分钟了解MATLAB编程
知乎 - 安全中心www.1data.pro《MATLAB编程360》视频课程:
MATLAB编程360 - 网易云课堂study.163.comstudy.163.com -
句柄 matlab_MATLAB作图实例:13:折线图和条形图的双轴图
2021-01-11 22:25:31折线图和条形图的双轴图Combine Line and Bar Charts Using Two y-Axes本示例说明如何使用绘制折线图和条形图的双周图。它还显示了如何自定义线条和条形图。使用创建具有两个y轴的图表yyaxis。图形函数以图表的活动... -
fix: 去除双轴图默认meta设置
2020-12-08 19:18:33但双轴图的 cat 类型,在某一方有空数据的情况下,会导致渲染错误,(见示例 https://riddle.alibaba-inc.com/riddles/7245c531 粗略看了眼,是 g2 在 syncScale 时,cat类型的... -
双轴图:原来一键就可以生成,特别简单、直观!
2017-08-07 17:09:23双轴图是数据分析工作中很常用的图表类型,其实双轴图=折线图+柱状图,想制作双轴图一点也不难!原来双轴图一键就可以在线生成,很简单,也很好看、直观!具体见文章哦~ -
怎么更改坐标轴标题access_用Access调整双轴图坐标及Excel中方法对比
2021-01-13 17:07:55用Access调整双轴图坐标及Excel中方法对比关键字:双轴图趋势图vbaexcelaccess坐标由于经常要画双轴图,常常碰到左轴有负数,右轴没有负数,希望将0轴坐标对齐。当然,一个图的话手工改就可以了,如果每个月都要画上... -
如何拼接FusionCharts的JSON格式的双轴图
2015-03-25 21:33:00假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来。 2、设计源码 /** * * @title:DoubleYaxis.java * @Package:... -
降雨径流双轴图
2014-01-08 23:58:49Matlab降雨径流双Y轴图,源于水文预报课程设计 -
fusioncharts json java_如何拼接FusionCharts的JSON格式的双轴图
2021-03-13 17:55:101、问题背景假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来。2、设计源码/**** @title:DoubleYaxis.java* @Package:... -
数据可视化_科学统计图表4——ggplot绘制双轴图(双纵坐标、双y轴)
2020-08-29 08:06:07数据可视化_科学统计图表4——ggplot绘制双轴图 什么是双轴图 双轴图是将两个不同量级的数据放在同一图像中显示的方法。如果不使用双轴图而直接将两组量级不同的数据放到同一图像中,就会造成一组低量级数据的极致... -
MATLAB Graph 双轴图
2019-05-19 13:52:18n=1:10; I=[0.57 1.89 3.82 6.73 3.74 15.16 21.32 27.47 15.91 3.38]; P0=[9000 12500 12500 16500 14000 28000 33500 57500 50000 32500]; plotyy(n,I,n,P0); [AX,H1,H2] =plotyy(n,I,n,P0,@plot);... -
python画相关系数矩阵图_pyhton中matplotlib箱线图的绘制(matplotlib双轴图、箱线图、散点图以及相关系数...
2020-12-05 17:00:02//2019.07.231、箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布...2、双轴图的绘制代码:import numpy as npimport matplotlib.pyplot as pltimport pandas as pdplt.rcP... -
pyhton中matplotlib箱线图的绘制(matplotlib双轴图、箱线图、散点图以及相关系数矩阵图))...
2019-10-04 21:20:09//2019.07.23 1、箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,...2、双轴图的绘制代码:import numpy as npimport matplotlib.pyplot as pltimport pandas... -
举个栗子!Tableau 技巧(68):制作连线冲蚀双轴地图(内附 完整中国地图 方法)
2020-07-24 22:17:08本期《举个栗子》,我们给大家分享这个 Tableau 技巧:制作连线冲蚀双轴地图 具体步骤如下: ➤ 数据准备 连线地图需要准备特有的数据形式,使用数据源表如下图(数据粉可照例自建数据,懒癌患者也可找我私信索取该... -
Superstore-Data-... #美国超级市场数据分析#计算字段#双轴图#计算参数#工作表#仪表板#故事-源码
2021-03-06 19:24:16Superstore-Data-Analysis:该项目基于Tableau Desktop工具构建。 #美国超级市场数据分析#计算字段#双轴图#计算参数#工作表#仪表板#故事 -
2.0.5版本双轴图可以选择面积图展现吗?
2020-11-29 11:11:41<div><p>该提问来源于开源项目:antvis/G2Plot</p></div> -
java做图插件_java报表开发插件制作双轴图
2021-03-09 01:50:04如图表中既存在柱形图,又有折线图或面积图,且各图表类型的纵坐标轴可设置在左或右,实现混合图表。如下图效果:, 2.示例2.1准备数据新建工作薄,添加数据集,SQL语句为SELECT 产品名称, 库存量, 订购量, 再订购量...