热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用EChart.JS绘制水平目标线

如何解决《使用EChart.JS绘制水平目标线》经验,为你挑选了1个好方法。

我想使用EChart.JS(https://ecomfe.github.io/echarts-doc/public/en/index.html)在水平线,条形图和饼形图中绘制一条显示阈值极限的水平目标线。

还有其他线程-“ Chart.js-绘制水平线”,详细介绍了如何使用Chart.JS。有没有人对EChart有特别的经验?

提前致谢。



1> Bob..:

选项markLine为此目的而设计的,请参见此处的文档:https : //ecomfe.github.io/echarts-doc/public/en/option.html#series-line.markLine

请注意,根据您要绘制的内容,它有不同的用途,并提供不同的选项:

画布上的任意线(任何大小,任何方向,任何样式)

符合数据特征的行(最小,最大,平均值)

水平/垂直线

在所有情况下,您都必须使用属性markLine.data,并且在此处描述了详细说明:https : //ecomfe.github.io/echarts-doc/public/en/option.html#series-line.markLine.data

这是我的工作方式,在时间序列上有一条直线。请注意,我无法使yAxis足以绘制一条水平线:还必须指定xAxis(起点和终点)。

   series: [{
    type: 'line',
    xAxisIndex: 0,
    yAxisIndex: 0,
    data: [
      [1509762600, 7.11376],
      [1509832800, 7.54459],
      [1509849000, 7.64559]
    ],
    markLine: {
      data: [
        // 1st line we want to draw
        [
          // start point of the line
          // we have to defined line attributes only here (not in the end point)
          {
            xAxis: 1509762600,
            yAxis: 3,
            symbol: 'none',
            lineStyle: {
              normal: {
                color: "#00F"
              }
            },
            label: {
              normal: {
                show: true,
                position: 'end',
                formatter: 'my label'
              }
            }
          },
          // end point of the line
          {
            xAxis: 1509849000,
            yAxis: 3,
            symbol: 'none'
          }
        ]
      ]
    }
  }]

这是一个小提琴:http : //jsfiddle.net/locinus/qrwron42/

请注意,ECharts确实喜欢在其末尾显示带有箭头符号的markLines,因此我使用symbol:'none'来绘制线条。


推荐阅读
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 本文总结了Java中日期格式化的常用方法,并给出了示例代码。通过使用SimpleDateFormat类和jstl fmt标签库,可以实现日期的格式化和显示。在页面中添加相应的标签库引用后,可以使用不同的日期格式化样式来显示当前年份和月份。该文提供了详细的代码示例和说明。 ... [详细]
  • [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • 微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • Windows下配置PHP5.6的方法及注意事项
    本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项,包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法,如下载缺失的msvcr110.dll文件等。通过本文的指导,读者可以轻松地在Windows系统下配置PHP5.6,并解决一些常见的配置问题。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 本文介绍了在Linux下安装Perl的步骤,并提供了一个简单的Perl程序示例。同时,还展示了运行该程序的结果。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文详细介绍了MySQL表分区的创建、增加和删除方法,包括查看分区数据量和全库数据量的方法。欢迎大家阅读并给予点评。 ... [详细]
  • 先看官方文档TheJavaTutorialshavebeenwrittenforJDK8.Examplesandpracticesdescribedinthispagedontta ... [详细]
author-avatar
索马里7_244
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有