精华内容
下载资源
问答
  • 记录折线图的一些基本设置: ...5.折线图距离上下左右的位置、折线的弧度、去掉折线节点的小圆点 6.鼠标滚轮滚动放大缩小 7.鼠标移入显示信息 8.图形切换工具 完整代码如下:(注意显示导入echarts.js) ...

    记录折线图的一些基本设置:

    1.折线图背景颜色

    2.标题字颜色、大小,小标题字颜色、大小

    3.xy轴颜色、xy轴字旋转、去掉x轴网格、去掉xy轴网格线、xy轴坐标线的宽度、颜色

    4.legend颜色

    5.折线图距离上下左右的位置、折线的弧度、去掉折线节点的小圆点

    6.鼠标滚轮滚动放大缩小

    7.鼠标移入显示信息

    8.图形切换工具

    完整代码如下:(注意显示导入echarts.js)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <!-- 引入 ECharts 文件 -->
        <script src="echarts.js"></script>
        <script type="text/javascript">
           window.onload=function () {
               // 基于准备好的dom,初始化echarts实例
               var myChart = echarts.init(document.getElementById('main'));
               // 指定图表的配置项和数据
               var option = {
                   backgroundColor:'bisque', //设置图标的背景颜色
                   title: {
                       text: '在校学生人数',
                       subtext: '最新统计表', //小标题
                       subtextStyle: {  //小标题颜色
                           color: '#ff4536'
                       },
                       textStyle: {   //标题颜色
                           color: '#380c3c'
                       }
                   },
                   xAxis: {
                       type: 'category',
                       splitLine:{show: false},//去除x轴网格线
                       splitArea : {show : false},//去掉网格区域
                       axisLine: {  //设置x轴坐标线的样式
                           lineStyle: {
                               type: 'solid',
                               color: '#161616',//x轴坐标线的颜色
                               width:'1'//x轴坐标线的宽度
                           }
                       },
                       axisLabel: {  //x轴刻度数值颜色
                           rotate: 10, //旋转x轴的文字
                           interval:0, //x轴每个项的距离  修改数据显示的个数
                           textStyle: {
                               color: '#1b1b1b'
                           }
                       },
                       data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']  //x轴数据项
                   },
                   yAxis: {
                       type: 'value',
                       splitArea : {show : false},//去掉网格区域
                       axisLine: {  //设置y轴坐标线的样式
                           lineStyle: {
                               type: 'solid',
                               color: '#161616',//y轴坐标线的颜色
                               width:'1'//y轴坐标线的宽度
                           }
                       },
                       axisLabel: {  //y轴刻度数值颜色
                           rotate: 10, //旋转y轴的文字
                           interval:0, //y轴每个项的距离  修改数据显示的个数
                           textStyle: {
                               color: '#1b1b1b'
                           }
                       },
                   },
                   toolbox: {  //图形切换工具
                        show : true,
                        feature : {
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                   },
                   legend: {
                       data:['学校A','学校B']  //这里的值对应series的name
                   },
                   color:['#ffa414','#30903f'],  //设置legend颜色
                   grid: {  //设置图标距离上下左右的距离 top一般默认
                       left: '3%',
                       right: '4%',
                       bottom: '3%',
                       containLabel: true
                   },
                   dataZoom: [  //放大缩小
                       {
                           type: 'inside'
                       }
                   ],
                   tooltip: { //鼠标移动到折线上 显示信息
                       trigger: 'axis'
                   },
                   series: [  //显示的折线个量
                       {
                           name:'学校A',
                           type:'line',
                           symbol:'none',  //去掉折线图每个节点的小圆点
                           smooth:'0.2',  //设置折线图的弧度 值:0-1之间
                           stack: '学校a在校人数',
                           lineStyle:{  //设置折线颜色
                                normal:{
                                    color:'#ffa414',
                                    width:3
                                }
                           },
                           data: [950, 610, 1050, 625, 502, 336, 340]
                       },
                       {
                           name:'学校B',
                           type:'line',
                           stack: '学校b在校人数',  //这里名字不要一样
                           lineStyle:{
                               normal:{
                                   color:'#30903f',
                                   width:3
                               }
                           },
                           data:[750, 210, 130, 450, 520, 620, 940]
                       },
    
                   ]
               };
               var zoomSize = 90;  //放大缩小
               myChart.on('click', function (params) {
                   console.log(name[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                   myChart.dispatchAction({
                       type: 'dataZoom',
                   });
               });
               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption(option);
           }
        </script>
    </head>
    <body>
    
    <div id="main" style="width: 600px;height:400px;margin: 100px auto"></div>
    
    </body>
    </html>

     

     

    展开全文
  • Qt自定义折线图控件

    千次阅读 热门讨论 2018-10-15 11:34:43
    目录 基础效果图 前言 设计要点 ...使用Qt自定义折线图,可以自己控制折线图的重绘规则,究竟是每添加一个数据就刷新整个折线图,还是只刷新部分折线图。 我把折线图分为以下两类: 坐标系是静...
    展开全文
  • iOS 折线图,柱状图

    2019-01-30 19:43:17
    在网上看了许多大家写的折线图,柱状图,有两种 如果只是简单的运用,可以自己用动画写一个 github地址 在网上看了许多大家写的折线图,柱状图,有两种 要点有: UIBezierPath用于定义一个直线/曲线组合而成的...

    在网上看了许多大家写的折线图,柱状图,有两种

    • 如果只是简单的运用,可以自己用动画写一个
      github地址

    在网上看了许多大家写的折线图,柱状图,有两种
    效果图
    要点有:
    UIBezierPath用于定义一个直线/曲线组合而成的路径,并且可以在自定义视图中渲染该路径。

    1 .

    + (instancetype)bezierPath;
    
    初始化一个UIBezierPath对象。
    

    2 .路径操作函数

    - (void)moveToPoint:(CGPoint)point;  
    将当前点移动到指定的位置。
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(100, 300)];
    
    • -(void)addLineToPoint:(CGPoint)point;在路径中增加一条直线(起点+终点=一条直线
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(100,300)];
    [bezierPath addLineToPoint:CGPointMake(150, 150)];
    

    这样就可以划出那些直线

    使用CAShaperLayer也可以绘图,优点在于:GPU执行
    可以看看这位大神的随笔https://www.cnblogs.com/zhouxihi/p/6273796.html,更加方便简洁

    • 网上也有很多优秀的第三方库,运用的效果更加自如,比如,百度开发的E-charts等等
      要点有:
      UIBezierPath用于定义一个直线/曲线组合而成的路径,并且可以在自定义视图中渲染该路径。

    1 .

    + (instancetype)bezierPath;
    
    初始化一个UIBezierPath对象。
    

    2 .路径操作函数

    - (void)moveToPoint:(CGPoint)point;  
    将当前点移动到指定的位置。
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(100, 300)];
    
    • -(void)addLineToPoint:(CGPoint)point;在路径中增加一条直线(起点+终点=一条直线
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(100,300)];
    [bezierPath addLineToPoint:CGPointMake(150, 150)];
    

    这样就可以划出那些直线

    使用CAShaperLayer也可以绘图,优点在于:GPU执行
    可以看看这位大神的随笔https://www.cnblogs.com/zhouxihi/p/6273796.html,更加方便简洁

    • 网上也有很多优秀的第三方库,运用的效果更加自如,比如,百度开发的E-charts等等
    展开全文
  • 修改自定义折线图的坐标轴 改变折线图的底色,底色透明 import datetime import sys from PyQt5 import QtWidgets, QtCore from PyQt5.QtCore import Qt from PyQt5.QtGui import QPainter, QC...
    就是这些自己遇到的需求:

    如有不对,请大佬不吝赐教.
    Qchart设定多个不同刻度的Y轴
    修改自定义折线图的坐标轴
    改变折线图的底色,底色透明
    鼠标悬停事件

    import datetime
    import sys
    
    from PyQt5 import QtWidgets, QtCore
    from PyQt5.QtCore import Qt
    from PyQt5.QtGui import QPainter, QCursor, QColor, QBrush
    from PyQt5.QtWidgets import QToolTip
    from PyQt5.QtChart import *
    
    
    
    class View_event(QtWidgets.QWidget):
        # view 总窗口
        def __init__(self):
            super(View_event, self).__init__()
            # self.setupUi(self)
    
            # 执行折线视图函数
            self.create_chart()
    
    
    
        def create_chart(self):
            # 创建折线视图窗口
    
            chart = QChartView(self)
            chart.setGeometry(QtCore.QRect(20, 100, 980, 380))
            chart.setRenderHint(QPainter.Antialiasing)  # 抗锯齿
            chart.raise_()
    
            chart._chart = QChart(title="折线图堆叠")  # 创建折线视图
            # chart._chart.setBackgroundVisible(visible=False)      # 背景色透明
            chart._chart.setBackgroundBrush(QBrush(QColor("#FFFFFF")))     # 改变图背景色
    
            #  图形项默认无法接收悬停事件,可以使用QGraphicsItem的setAcceptHoverEvents()函数使图形项可以接收悬停事件。
            chart._chart.setAcceptHoverEvents(True)
            # 4条折线的坐标值
    
            dataTable = [
                # 这里是y值对应13个x轴
                ["PTSA",130, 182, 120, 154, 109, 170, 110,150, 132, 141, 114, 100, 160],
                ["pH", 120, 154, 109,132, 160,110, 130, 141, 194, 170,110, 182,110],
                ["ORP",109,132,174,130,  120,150, 110, 170,  120,164,  132, 141,  160],
                ["Conductivity", 160, 109, 154, 130,182, 132, 141, 160,150,170, 180,164,120]
            ]
            # 执行创建折线的函数
            self.create_series(dataTable,chart)
    
    
            chart._chart.createDefaultAxes()  # 创建默认的轴
    
            chart._chart.axisY().setTickCount(11)  # y1轴设置10个刻度
            chart._chart.axisY().setLabelFormat("%d")
            chart._chart.axisY().setRange(100, 200)  # 设置y1轴范围
    
            # 定义多个y轴
            y2_Aix = QValueAxis()  # 定义y2轴
            y2_Aix.setLabelFormat("%d")
            y2_Aix.setRange(250, 360)
            y2_Aix.setTickCount(11)
            chart._chart.addAxis(y2_Aix, Qt.AlignLeft)  # 添加到左侧
    
    
            y3_Aix = QValueAxis()  # 定义y3轴
            y3_Aix.setLabelFormat("%d")
            y3_Aix.setRange(0, 110)
            y3_Aix.setTickCount(11)
            chart._chart.addAxis(y3_Aix, Qt.AlignRight)  # 添加到右侧
    
            y4_Aix = QValueAxis()  # 定义y4轴
            y4_Aix.setLabelFormat("%d")
            y4_Aix.setRange(3870, 3980)
            y4_Aix.setTickCount(11)
            chart._chart.addAxis(y4_Aix, Qt.AlignRight)  # 添加到右侧
    
    
            chart._chart.axisX().setTickCount(11)  # X轴设置10个刻度
            # 执行定义X轴的函数
            self.customAxisX(chart._chart)
    
            chart.setChart(chart._chart)
    
    
    
        def create_series(self,dataTable,chart):
            # 创建折线的函数
            for i, data_list in enumerate(dataTable):  # [index,[list]]
                # 创建曲线
                series = QLineSeries(chart._chart)
                # 设置折线名
                series.setName(data_list[0])
    
                for j, v in enumerate(data_list[1:]):
                    #  添加折线和对应的坐标点
                    series.append(j, v)
    
                series.setPointsVisible(True)  # 显示原点
                # 鼠标悬停连接事件
                series.hovered.connect(self.onSeriesHoverd)
                chart._chart.addSeries(series)  # 添加折线到视图窗口
            return chart._chart
    
    
        def customAxisX(self,chart):
            # 自定义x轴(均分)
            chart = chart
            series = chart.series()
            if not series:
                return
            # 获取当前时间前8小时的一小时内的时间
            time =[]
            for index in range(13):
                num = 60/13
                last_day = (datetime.datetime.now() + datetime.timedelta(hours=-8,minutes=- index*num)).strftime(
                    "%H:%M")
                time.append(last_day)
            category=list(reversed(time))
    
            '''QValueAxis是轴的范围什么的不需要自己指定,轴上显示的label(也就是0,1,2,3这些内容)是默认的。
            qt会根据你轴上的点自动设置。若你需要自定义一些内容,QCategoryAxis是比较好的,但是需要自己自定义好才可以调用。'''
            axisx = QCategoryAxis(
                chart, labelsPosition=QCategoryAxis.AxisLabelsPositionOnValue)
    
            axisx.setGridLineVisible(False)  # 隐藏网格线条
            axisx.setTickCount(len(category))  # 设置刻度个数
            minx = chart.axisX().min()
            maxx = chart.axisX().max()
            tickc = chart.axisX().tickCount()
            print(tickc)
            if tickc < 2:
                axisx.append(category[0])
            else:
                step = (maxx - minx) / (tickc - 1)  # tickc>=2
                for i in range(0, tickc):
                    axisx.append(category[i], minx + i * step)
                    # 保存x轴值
            chart.setAxisX(axisx, series[-1])
    
    
    
        def onSeriesHoverd(self, point, state):
                # 鼠标悬停事件(底部x,y)
                if state:
                    try:
                        name = self.sender().name()
                    except:
                        # QCursor.pos()悬停提示文字显示的位置
                        name = ""
                    QToolTip.showText(QCursor.pos(), "%s\nx: %s\ny: %s" %
                                      (name, point.x(), point.y()))
    
    
    
    if __name__ == '__main__':
        app = QtWidgets.QApplication(sys.argv)
        # 初始化所有视图
        login = View_event()
    
        login.show()
    
        sys.exit(app.exec_())
    
    

    执行效果如下

    执行效果

    展开全文
  • iOS折线图

    2015-09-09 16:22:39
    简单的折线图DEMO
  • 自定义Echarts折线图中悬浮框的位置

    千次阅读 2018-08-31 17:48:28
    在Echarts3的折线图的使用过程中,想使初始化出来的图表更人性化,就比如说有这么个需求,在Echarts折线图中,鼠标悬浮在左侧某一个点时,悬浮框悬停在点的右侧;鼠标悬停在右侧某一个点时,悬浮框悬停在点的左侧。 ...
  • Echarts 折线图区域鼠标事件高亮

    千次阅读 2020-06-08 22:15:54
    Echarts 折线图区域鼠标事件高亮
  • iOS画柱状图,折线图

    千次阅读 2016-11-16 16:49:40
    iOS画柱状图和折线图 首先新建一个UIView 的类, 然后重写 drawRect 的方法 #define LINEWIDTH 10 //柱状图的柱的宽度 @implementation SZColumnarView /* // Only override drawRect: if you ...
  • 横向滑动的折线图

    千次阅读 2017-08-26 20:57:39
    本控件是仿MIUI8天气24小时预报折线图,用小米手机的可以打开天气软件看一下。本文是对自定义View的练手作品,要有写自定义view的基础知识。 使用方法 xml: ...
  • CorePlot提供了散点图(CPTScatterPlot)的绘制,包括:折线图、曲线图、直方图。
  • 在这本有关使用Chart.js进行数据设计的课程的视频教程中,您将通过使用Chart.js框架在网格上绘制一系列点来创建简单的折线图。 完成此操作后,我们将观察Chart.js框架为您完成其余的繁重工作。 您可以在此处找到源...
  • matplotlib绘制折线图

    2020-02-19 01:11:02
    matplotlib绘制折线图 这阳春三月的邵大白在家过的什么日子,幽栖地僻经过少,花径不曾缘客扫~ 开个逗b号纪念下这段闭关的时光=^=万一他以后就变成一个数据分析的大v号了来~ 好了邵大白课堂开课了 折线图绘制 咱先画...
  • 原生js和canvas实现的 柱状图、饼状图、折线图
  • import matplotlib from matplotlib import pyplot as plt import random #导入数据 x = range(0,12) y = [random.randint(-10,30) for i in range...plt.figure(figsize = (10,8),#指定画布宽和高,单位为英寸 ...
  • 绘制坐标图,折线图

    千次阅读 2015-11-18 18:34:04
    项目中会使用坐标来展示数据的变换,那么就会使用一些ios中的绘制线条的功能,例如: //**两点之间画实线 -(void)drawLineFrom:(CGPoint)origion to:(CGPoint)endPoint context:(CGContextRef)context ...
  • 简单使用canvas 绘制总量图,饼图,折线图
  • 折线图饼状图柱形图

    2017-02-18 14:45:00
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script> ...折线图 柱形统计图 饼状图 转载于:https://www.cnblogs.com/lizanqirxx/p/6241039.html
  • 原文:Swift - 第三方图表库Charts使用详解9(折线图8:显示指定区域数据、选中居中) (2)这种情况我们可以让图表自动进行缩放。比如一次最多显示 10 个点的数据,这里我默认显示最后的 10 条数据。 原文:Swift - ...
  • Android中自定义折线图

    千次阅读 2016-04-30 15:31:40
    有时候,我们在做开发的时候,需要让用户更直观的看到数据变化,而又不应该给其提供一堆表格显示,有时候就需要用到,类似Excel中的图表,可是Google官方并没有...向下是Y轴虚线,数量点图标及折线趋势,最后做了一
  • ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库,能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,...
  • 1、折线图 2、直方图 3、散点图 4、颜色映射(colormap) 5、pygal模块(svg格式) 6、随机漫步 重要知识点 import matplotlib.pyplot as plt -- 绘制2D折线图,直方图,散点图等 import numpy as np -- 将...
  • 微信小程序画折线图

    万次阅读 2017-09-24 15:13:48
    折线图(小程序每天的访问人数)文件功能
  • Android PathEffect 自定义折线图必备

    千次阅读 2017-03-26 11:43:04
    Android中PathEffect的使用,带你自定义折线图
  • Echarts是什么 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分...ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据
  • Echarts ECharts,一个使用 JavaScript实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/...通过使用ECharts,可以快速实现数据可视化,下面简单演示一下直方图与折线图的...
  • 折线图(自定义view)

    2021-06-15 11:21:06
    //复制粘贴就完事了 //图片和颜色值需要自己替换一下 <color name="color_EE">#EEEEEE</color> <...//自定义折线图 public class LineView extends View { Paint linePaint;//画线 .
  • 更多内容,移步下篇 matplotlib笔记(二) 其它类型图与多图打印 ...Part1 折线图 实验一 先画一个简单的折线图 #折线图1 x=np.linspace(-1,1,50) y= x*2+1 plt.plot(x,y) plt.show() ...
  • 但同时我们又不得不学会的 那就是————「折线图」。读完本篇文章你可以学什么 js实现直线方程折线图的表达canvas 的一些小技巧 直线折线图 我们先去非常有名的Echarts 官网看一看,他的折线图是什么样子的?如...
  • 如何使用D3绘制折线图

    千次阅读 2016-10-30 17:12:00
    下面我们使用D3来绘制一个折线图。 首先 在使用D3之前,我们先下载D3文件,或者你可以通过下面代码链接最新版本的文件。 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8">...
  • 自定义View之仿小米MIUI天气24小时预报折线图

    千次阅读 多人点赞 2017-07-31 19:31:19
    本控件是仿MIUI8天气24小时预报折线图,用小米手机的可以打开天气软件看一下。本文是对自定义View的练手作品,要有写自定义view的基础知识。使用方法xml: android:id="@+id/weather" android:layout_width

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,739
精华内容 2,295
关键字:

如何移动折线图到指定位置