-
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 产品名称, 库存量, 订购量, 再订购量...
收藏数
382
精华内容
152