精华内容
下载资源
问答
  • Echarts-双轴图

    2019-02-15 15:18:59
    Echarts-双轴图
                   

    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柱状图、折线图的组合双轴图效果,结合实例形式分析了jQuery使用HighCharts插件同时绘制柱状图、折线图的组合双轴图实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要...
  • HighCharts之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实现的双轴图效果,结合完整实例形式分析了Echarts插件制作双轴图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
  • 一个分析师小伙伴跟我抱怨,老板是从Linkedin美国总部回来的,明令禁止团队使用双轴图,可怎么办呀... 双轴图作为一种常用的图表类型,确实在行业里争议不少。那么到底能不能使用双轴图呢? 双轴图的问题 双轴...

    一个分析师小伙伴跟我抱怨,老板是从Linkedin美国总部回来的,明令禁止团队使用双轴图,可怎么办呀...

    双轴图作为一种常用的图表类型,确实在行业里争议不少。那么到底能不能使用双轴图呢?

     

    双轴图的问题

    双轴图被人诟病并不算冤枉,比如看下面左边的这张图,乍一眼看上去,是不是觉得女装的销售量和男装差不多嘛。

    但其实是因为数据轴量级的不同,右边的图才是真实的情况,和女装相比,男装数据少的不值一提。

    双轴图经常被误使用,当两个数据量级差异太大的时候,双轴图总是会被第一时间想起,但其实这种场景下不建议使用双轴图,因为有可能给人带来的误解实在太大了,而如果图表的浏览者基于这样错误的印象做了决策,带来的损失可能很严重呢。

    如果这两组数据一定要放在一起看,还是建议分成2个线图,或者使用表格等方式展示。

     

    那什么时候可以使用双轴图呢?

    对于要同时查看一个数值和百分比的时间趋势,双轴图就派上大用场了。

    比如要查看每天成交金额及其同比上周的变化率,比如要查看每天访问用户量及留存率,双轴图都非常适合。

    为了浏览起来更直观,建议用柱图来表示数值类数据,用线图来表示百分比。    

     

     

    Quick BI 的双轴图

    这里推荐一下我在用的Quick BI的双轴图,这里面的图表支持非常灵活的配置。

     

    第一步:在图表类型中选择组合图

    第二步配置度量、维度,

    • 将“成交金额”拖入主值轴/度量
    • 再拖入“成交金额”至副值轴/度量,修改为周同比,将显示方式修改为“线型”
    • 将时间字段拖入类别轴/维度

    第三步,点击更新,就完成配置了


     

    作者:常成

     

    展开全文
  • 折线图和条形图的双轴图Combine Line and Bar Charts Using Two y-Axes本示例说明如何使用绘制折线图和条形图的双周图。它还显示了如何自定义线条和条形图。使用创建具有两个y轴的图表yyaxis。图形函数以图表的活动...

    9f3c01bb17b7da9908fab8dcc2a7ecc8.png

    折线图和条形图的双轴图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

    ee2e463cde1f0bdd807a0676528cc92b.png

    在图表中添加标题和轴标签。

     title('Temperature and Concentration Data')
     xlabel('Day')
     yyaxis left%控制左纵轴
     ylabel('Temperature (circC)')
     yyaxis right%控制右纵轴
     ylabel('Concentration')

    9f3e62fb3a5e812b1d22d59e15b35536.png

    更改图表线的宽度并更改条形颜色。

     p.LineWidth = 3;%设置线宽
     b.FaceColor = [ 0 0.447 0.741];%设置柱面颜色

    e84dddb8a7f1f4074e01b0065f6931ba.png

    注:本文根据MATLAB官网内容修改而成。

    我推荐给你以下的视频教程,特点是没有PPT,不掺水,直接编程环境下的实操课程: 用100分钟了解MATLAB编程

    知乎 - 安全中心www.1data.pro

    《MATLAB编程360》视频课程:

    MATLAB编程360 - 网易云课堂study.163.comstudy.163.com
    展开全文
  • 折线图和条形图的双轴图Combine Line and Bar Charts Using Two y-Axes本示例说明如何使用绘制折线图和条形图的双周图。它还显示了如何自定义线条和条形图。使用创建具有两个y轴的图表yyaxis。图形函数以图表的活动...
  • 双轴图的 cat 类型,在某一方有空数据的情况下,会导致渲染错误,(见示例 https://riddle.alibaba-inc.com/riddles/7245c531 粗略看了眼,是 g2 在 syncScale 时,cat类型的...
  • 双轴图是数据分析工作中很常用的图表类型,其实双轴图=折线图+柱状图,想制作双轴图一点也不难!原来双轴图一键就可以在线生成,很简单,也很好看、直观!具体见文章哦~
  • 用Access调整双轴图坐标及Excel中方法对比关键字:双轴图趋势图vbaexcelaccess坐标由于经常要画双轴图,常常碰到左轴有负数,右轴没有负数,希望将0轴坐标对齐。当然,一个图的话手工改就可以了,如果每个月都要画上...
  •  假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来。 2、设计源码 /** * * @title:DoubleYaxis.java * @Package:...
  • 降雨径流双轴图

    2014-01-08 23:58:49
    Matlab降雨径流双Y轴,源于水文预报课程设计
  • 1、问题背景假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来。2、设计源码/**** @title:DoubleYaxis.java* @Package:...
  • 数据可视化_科学统计图表4——ggplot绘制双轴图 什么是双轴图 双轴图是将两个不同量级的数据放在同一图像中显示的方法。如果不使用双轴图而直接将两组量级不同的数据放到同一图像中,就会造成一组低量级数据的极致...
  • MATLAB Graph 双轴图

    2019-05-19 13:52:18
    n=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);...
  • //2019.07.231、箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布...2、双轴图的绘制代码:import numpy as npimport matplotlib.pyplot as pltimport pandas as pdplt.rcP...
  • //2019.07.23 1、箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,...2、双轴图的绘制代码:import numpy as npimport matplotlib.pyplot as pltimport pandas...
  • 本期《举个栗子》,我们给大家分享这个 Tableau 技巧:制作连线冲蚀双轴地图 具体步骤如下: ➤ 数据准备 连线地图需要准备特有的数据形式,使用数据源表如下(数据粉可照例自建数据,懒癌患者也可找我私信索取该...
  • Superstore-Data-Analysis:该项目基于Tableau Desktop工具构建。 #美国超级市场数据分析#计算字段#双轴图#计算参数#工作表#仪表板#故事
  • <div><p>该提问来源于开源项目:antvis/G2Plot</p></div>
  • 如图表中既存在柱形,又有折线或面积,且各图表类型的纵坐标轴可设置在左或右,实现混合图表。如下效果:, 2.示例2.1准备数据新建工作薄,添加数据集,SQL语句为SELECT 产品名称, 库存量, 订购量, 再订购量...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 382
精华内容 152
关键字:

双轴图