`

图形化工具jqplot使用梳理4-多折线及多坐标轴处理

阅读更多

 多折线图及多坐标轴实例应用
 var plot1 = $.jqplot('chart', [line2,line1], { //集合的数量   
      title:'${title}',
      series:[    
            {//和集合的数据保存一致,否则会默认初始化
                lineWidth: .5, //指定折线的宽度
                markerOptions: { size: 8},
                label: '收益组合'
            },
            {
                lineWidth: 1, //指定折线的宽度
                markerOptions: { size: 2},
                label: '净值组合',
                yaxis:'y2axis'
            }
      ],
      legend: {
            show: true,//设置是否出现分类名称框(即所有分类的名称出现在图的某个位置)
            location: 'nw'
            /*
            ,     // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.
            xoffset: 12,        // 分类名称框距图表区域上边框的距离(单位px)
            yoffset: 12,        // 分类名称框距图表区域左边框的距离(单位px)
            background:'#00ccff' ,       //分类名称框距图表区域背景色
            textColor:'#ff0000'          //分类名称框距图表区域内字体颜色..其他关于样式设计参考官方文档
            */
         },
      seriesColors: ["#cbccb2","#ff0000"],//和集合的数据保存对应
      axesDefaults: {
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
          tickOptions: {
              angle: 70,  //倾斜角度
              fontSize: '10pt'
          }
      },
      axes:{   
          xaxis:{   
              label: '日期',
              //renderer: $.jqplot.CategoryAxisRenderer,
              renderer: $.jqplot.DateAxisRenderer, //x轴绘制方式 LinearAxisRenderer
              tickOptions:{   
                  formatString:'%Y-%m-%d'   
              },
              //tickInterval: ''+86400000,   //1 day的毫秒数 
              labelOptions: {
                  fontSize: '12pt'
              }
          },
          y2axis:{ //坐标轴y2
              tickOptions:{   
                    formatString:'%.2f',   
                    angle:0    
              },   
              labelOptions:{                    
                  fontFamily:'Helvetica',                    
                  fontSize: '14pt'               
              },    
              label:' 总  值(亿)'  ---竖排的时候,要对齐配置
              //min:${minvalueY}  // set the min value for the y axis 
          },
          yaxis:{ //坐标轴y
              tickOptions:{   
                    formatString:'%.2f',   
                    angle:0    
              },   
              labelOptions:{                    
                  fontFamily:'Helvetica',                    
                  fontSize: '14pt'               
              },    
              label:' 得  失(%)'  ---竖排的时候,要对齐配置 注意和英文字符的区分
              //min:${minvalueY}  // set the min value for the y axis 
          }   
      }
      }
      );

效果图:



 

  • 大小: 121.5 KB
分享到:
评论

相关推荐

    C#绘制折线图含坐标轴

    本教程将详细介绍如何利用C#在PictureBox控件中绘制包含坐标轴的折线图。 首先,我们需要引入必要的命名空间,如`System.Drawing`,它提供了用于图形绘制的基本类和方法: ```csharp using System.Drawing; ``` ...

    EXCEL-2007-如何制作双坐标轴图(堆积柱状图+折线图).pdf

    EXCEL 2007 制作双坐标轴图(堆积柱状图+折线图) Excel 2007 是微软公司推出的电子表格软件,具有强大的数据处理和分析能力。本文档将指导您如何在 Excel 2007 中制作双坐标轴图,包括堆积柱状图和折线图。 制作...

    Excel-VBA宏编程实例源代码-图表的处理-设置坐标轴刻度的类型.zip

    在实际应用中,你可能需要根据实际需求调整这些属性的值,或者编写循环来处理多个轴或多个图表。这个实例源代码将帮助你了解如何在VBA宏中操作这些属性,实现对坐标轴刻度类型的精细控制,从而定制出满足特定需求的...

    zhexiantu.zip_matlab 折线图_matlab坐标轴_折线图

    在MATLAB编程环境中,折线图是一种非常常见且实用的数据可视化工具,用于展示数据随时间或其他连续变量的变化趋势。本文将深入探讨如何使用MATLAB绘制折线图,并着重讲解如何自定义坐标轴。 首先,我们需要了解...

    ios-自定义坐标轴,折线图,柱状图,多折线图,可以拖动 升级版.zip

    "ios-自定义坐标轴,折线图,柱状图,多折线图,可以拖动 升级版.zip" 包含了一个名为 "CustomGraphView" 的项目,它提供了一套强大的自定义图形视图组件,支持用户交互,如拖动以及点击显示详细信息。这个库是为那些...

    matlab pro-1_matlab去掉x轴_坐标刻度_

    在MATLAB中,对图形进行定制化操作是十分常见的需求,比如去除坐标轴上的刻度标记,以便于更清晰地展示数据或者使图形更具专业感。本篇文章将详细讲解如何在MATLAB中去除右侧Y轴和顶部X轴的刻度标记,同时避免使用`...

    Excel折线图怎么设置坐标轴起点不为0?.docx

    在Excel中创建折线图时,有时为了更好地突出显示数据趋势或者避免数据比例失真,我们可能需要调整坐标轴的起点,使其不从0开始。此外,为了清晰地标识每个数据点,我们还可能需要添加数据标志。以下是如何在Excel中...

    20. R_ggplot2_调整坐标轴显示范围、标签、测度方法汇总.pdf

    在R语言中,ggplot2是用于数据可视化的一个强大工具包,提供了很多自定义图形的功能。本文将详细讲解如何在ggplot2中调整坐标轴的显示范围、标签和测度方法,这些都是制作高质量图表不可或缺的一部分。 首先,了解...

    Android蓝牙socket应用编程-心电图-动态折线图demo

    总的来说,这个demo项目综合运用了Android的蓝牙API、网络编程、数据处理和图形绘制技术,为学习和实践Android物联网应用开发提供了很好的示例。对于想要深入了解这些领域的开发者来说,这是一个非常有价值的参考...

    Excel模板7-多层折线图(静态).zip

    在Excel中,多层折线图是一种非常有效的数据可视化工具,尤其适用于展示多个变量随时间变化的趋势或比较不同组在同一时间段内的变化。本模板“7-多层折线图(静态).xlsx”旨在帮助用户快速创建具有多层的静态折线图...

    Excel模板6-多层折线图(动态).zip

    在Excel中,多层折线图是一种非常有效的数据可视化工具,尤其适用于展示多个变量随时间变化的趋势。这个“Excel模板6-多层折线图(动态)”提供了一个交互式的例子,帮助用户理解和创建类似的图表。以下是关于多层...

    C#的坐标轴绘图处理工程

    在C#编程环境中,坐标轴绘图处理是一项关键任务,特别是在数据可视化和图形用户界面(GUI)开发中。本工程专注于实现这一功能,提供了一个高度封装的解决方案,以支持二次开发和未来的系统升级。让我们深入探讨一下...

    ios-自定义坐标轴,折线图,柱状图,多折线图,可以拖动.zip

    这个名为"ios-自定义坐标轴,折线图,柱状图,多折线图,可以拖动.zip"的压缩包提供了一个名为CustomGraphView的开源库,它可以帮助开发者创建具有交互功能的图形,包括自定义坐标轴、折线图、柱状图以及多折线图。...

    Qml之坐标轴的实现及曲线添加

    在QML(Qt Quick)中,创建可视化应用时,经常需要展示数据,这通常涉及到坐标轴和曲线的绘制。QmlQAxis这个主题是关于如何在QML中实现坐标轴以及动态添加曲线的过程,这对于数据可视化的应用尤其重要。下面我们将...

    react-charts实现折线图、柱图等等各种图形

    `react-charts`库是一个强大的工具,能够帮助开发者轻松创建包括折线图、柱状图、饼图在内的各种图形。这个库提供了丰富的自定义选项,使得开发者可以根据需求定制出符合项目风格的图表效果。 首先,我们来了解一下...

    QT画坐标系折线图

    QT框架是Qt公司开发的一款强大的跨平台应用程序开发框架,它提供了丰富的图形用户界面(GUI)工具,使得开发者能够创建出美观且功能丰富的应用。在QT中,我们可以利用QPainter类来实现自定义的图形绘制,包括画坐标...

    echarts实现多维坐标轴

    由于数据单位不同,我们需要为每个坐标轴的 `axisLabel` 定义不同的格式化函数。例如,`Price` 数据使用货币格式,而 `Time` 数据则转换为本地时间字符串。 4. **样式调整** 为了区分不同坐标轴,我们还可以通过...

    jqplot折线图和柱状图

    折线图是一种常用的数据可视化方式,用于展示数据随时间变化的趋势。在jqPlot中,创建折线图的基本步骤如下: 1. **HTML结构**:首先在HTML页面中创建一个div元素作为图表容器。 2. **JavaScript代码**:使用...

    flash统计图- flash柱形图- flash圆饼图- flash折线图 多款flash统计图动画

    4. 折线图:折线图以折线连接数据点,展示了数据随时间的变化趋势。Flash中的折线图可以设置为动态,用户可以交互式地改变时间轴或者选择展示的数据系列,对于监测连续变量的变化非常有用。 5. XML配置:XML(可...

Global site tag (gtag.js) - Google Analytics