...

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>Highcharts</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <script src="https://code.highcharts.com/highcharts.js"></script>
  11.         <script src="https://code.highcharts.com/modules/exporting.js"></script>
  12.         <!--<script src="https://code.highcharts.com.cn/highcharts/themes/grid.js"></script>  <!--主题： dark-unica.js -->
  13.         <!--<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>  -->
  14.         <div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>
  15.         <!-- 图像大小 -->
  16.         <!--
  17.             作者：offline
  18.             时间：2019-07-05
  19.             描述：
  20.             宽 width: 800, 高 height: 600,
  21.         -->
  22.     </body>
  23.     <script>
  24.         var w = window.innerWidth || document.documentElement.clientWidth;
  25.         var h = window.innerHeight || document.documentElement.clientHeight;
  26.         var zhingjianzhi = w/2;
  27.         var yj = w*0.3; // 意见的最大值
  28.         var yjzjz = yj/2; // 意见的中间值
  29.         var hf = w*0.65; // 回复的中间值
  30.         var jl = h*0.1; // 距离上下的值
  31.         var zi_k = 84; // 六个字有    84   左右
  32.         var zi_g = 28; // 六个字有    84   左右
  33.         var ygz_k = 13;  // 意见 = 26*18
  34.         var ygz_g = 9;  // 意见 = 26*18
  35.         var jt = 100; // 箭头长度为100
  36.         console.log(yj-(jt/2));
  37.         console.log(jl+(zi_g/2)+(jl*0.9));
  38.         // 图表样式 // https://www.highcharts.com.cn/docs/basic-chart
  39.         Highcharts.setOptions({
  40.             lang:{
  41.                 contextButtonTitle:"图表导出菜单",
  42.                 decimalPoint:".",
  43.                 downloadJPEG:"下载JPEG图片",
  44.                 downloadPDF:"下载PDF文件",
  45.                 downloadPNG:"下载PNG文件",
  46.                 downloadSVG:"下载SVG文件",
  47.                 drillUpText:"返回 {series.name}",
  48.                 loading:"加载中",
  49.                 months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
  50.                 noData:"没有数据",
  51.                 numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
  52.                 printChart:"打印图表",
  53.                 resetZoom:"恢复缩放",
  54.                 resetZoomTitle:"恢复图表",
  55.                 shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
  56.                 thousandsSep:",",
  57.                 weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六","星期天"]
  58.             }
  59.         });
  60.         Highcharts.chart('container', {
  61.             chart: {
  62.                 backgroundColor: 'white',
  63.                 events: {
  64.                     load: function() { // 图表加载完后事件，效果见
  65.  
  66.                         // Draw the flow chart
  67.                         //绘制流程图
  68.                         var ren = this.renderer,
  69.                             colors = Highcharts.getOptions().colors,
  70.                             rightArrow = ['M', 0, 0,  'L', 100, 0,'L',95,5,'M', 100, 0,'L',95,-5]; // 右箭头
  71.  
  72.                         // Separator, CLI from service
  73.                         // 分隔符，来自服务的CLI
  74.                         //  ？，上面点的值，上下隔开的值，？，下面点的值，多长
  75.                         ren.path(['M', yj, 40, 'L', yj, h]) // 绘制路径
  76.                         // 包括： (M) 移动、(L) 画线、 (C) 画曲线 和 (Z)关闭。
  77.                             .attr({
  78.                                 'stroke-width': 2,
  79.                                 stroke: 'silver',
  80.                                 dashstyle: 'dash'
  81.                             })
  82.                             .add();
  83.  
  84.                         // 左右，上下
  85.                         ren.label('意见', yjzjz-ygz_k, jl) // 绘制标签
  86.                         // https://api.highcharts.com.cn/highcharts#Renderer.label
  87.                             .css({
  88.                                 fontWeight: 'bold'
  89.                             })
  90.                             .add();
  91.                         ren.label('回复', w*0.65, jl)
  92.                             .css({
  93.                                 fontWeight: 'bold'
  94.                             })
  95.                             .add();
  96.  
  97.                         // 名称， 左右的值，上下的值
  98.                         ren.label('六六六六六六', yjzjz-(zi_k/2), jl+(jl*0.9))
  99.                             .attr({
  100.                                 fill: colors[0],
  101.                                 stroke: 'white',
  102.                                 'stroke-width': 2,
  103.                                 padding: 5,
  104.                                 r: 5
  105.                             })
  106.                             .css({
  107.                                 color: 'white'
  108.                             })
  109.                             .add()
  110.                             .shadow(true);
  111.  
  112.                         // 名称，  (左右)，(上下)
  113.                             // 不要等到错过才知珍惜，不要等到失去才知后悔。不要等要离开那一刻才懂，不论吵成什么样，只要要分离，就什么都可以原谅，这才是爱啊!<br/>
  114.                             // 无论发生了多大的事，忍一忍，一切都会过去的。现实是残酷的，可生活是美好的，我们要学会在残酷中享受美好。
  115.                         // 字数太多需要加  <br/> ，考虑 退回的问题，
  116.                         ren.label('PhantomJS // 幻影', yj+55, jl+(jl*0.9)) // 幻影   PhantomJS
  117.                             .attr({
  118.                                 r: 5, // 宽
  119.                                 width: w-(yj+60)-30, // 长
  120.                                 fill: colors[1]
  121.                             })
  122.                             .css({
  123.                                 color: 'white', // 颜色
  124.                                 fontWeight: 'bold'
  125.                             })
  126.                             .add();
  127.  
  128.                         ren.label('PhantomJS // 幻影', yj+55, jl+(jl*0.9)+30) // 幻影   PhantomJS
  129.                             .attr({
  130.                                 r: 5, // 宽
  131.                                 width: w-(yj+60)-30, // 长
  132.                                 fill: colors[1]
  133.                             })
  134.                             .css({
  135.                                 color: 'white', // 颜色
  136.                                 fontWeight: 'bold'
  137.                             })
  138.                             .add();
  139.  
  140.                         ren.label('PhantomJS // 幻影', yj+55, jl+(jl*0.9)+(30*2)) // 幻影   PhantomJS
  141.                             .attr({
  142.                                 r: 5, // 宽
  143.                                 width: w-(yj+60)-30, // 长
  144.                                 fill: colors[1]
  145.                             })
  146.                             .css({
  147.                                 color: 'white', // 颜色
  148.                                 fontWeight: 'bold'
  149.                             })
  150.                             .add();
  151.  
  152.                         // 向右的箭头
  153.                         ren.path(['M', 0, 0,  'L', 100, 0,'L',95,5,'M', 100, 0,'L',95,-5])
  154.                             .attr({
  155.                                 'stroke-width': 2, // 多粗
  156.                                 stroke: colors[5] // 颜色
  157.                             })
  158.                             .translate(yj-(jt/2), jl+(zi_g/2)+(jl*0.9)) // 左右 ，上下
  159.                             .add(); 
  160.  
  161.                         // 向下的箭头
  162.                         ren.path(['M', yjzjz, jl+(jl*0.9)+30, 'L', yjzjz, jl+(jl*0.9)+80,
  163.                                     'L', yjzjz-5, jl+(jl*0.9)+75,'M', yjzjz, jl+(jl*0.9)+80,'L', yjzjz+5, jl+(jl*0.9)+75])
  164.                             .attr({
  165.                                 'stroke-width': 2,
  166.                                 stroke: colors[3]
  167.                             })
  168.                             .add();
  169.  
  170.                         ren.label('11六六六六六', yjzjz-(zi_k/2), jl+(jl*0.9)+90)
  171.                             .attr({
  172.                                 fill: colors[0],
  173.                                 stroke: 'white',
  174.                                 'stroke-width': 2,
  175.                                 padding: 5,
  176.                                 r: 5
  177.                             })
  178.                             .css({
  179.                                 color: 'white',
  180.                                 width: '100px'
  181.                             })
  182.                             .add()
  183.                             .shadow(true);
  184.  
  185.                         ren.label('Batik // 蜡染', yj+55, jl+(jl*0.9)+90)
  186.                             .attr({
  187.                                 r: 5,
  188.                                 width: 100,
  189.                                 fill: colors[1]
  190.                             })
  191.                             .css({
  192.                                 color: 'white',
  193.                                 fontWeight: 'bold'
  194.                             })
  195.                             .add();
  196.  
  197.                         // 向右的箭头
  198.                         ren.path(['M', 0, 0,  'L', 100, 0,'L',95,5,'M', 100, 0,'L',95,-5])
  199.                             .attr({
  200.                                 'stroke-width': 2, // 多粗
  201.                                 stroke: colors[5] // 颜色
  202.                             })
  203.                             .translate(yj-(jt/2), jl+(zi_g/2)+(jl*0.9)+90) // 左右 ，上下
  204.                             .add(); 
  205.  
  206.                         // 向下的箭头
  207.                         ren.path(['M', yjzjz, jl+(jl*0.9)+30+90, 'L', yjzjz, jl+(jl*0.9)+80+90,
  208.                                     'L', yjzjz-5, jl+(jl*0.9)+75+90,'M', yjzjz, jl+(jl*0.9)+80+90,'L', yjzjz+5, jl+(jl*0.9)+75+90])
  209.                             .attr({
  210.                                 'stroke-width': 2,
  211.                                 stroke: colors[3]
  212.                             })
  213.                             .add();
  214.                     }
  215.                 }
  216.             },
  217.             title: {
  218.                 text: 'HighCharts导出服务器概述',
  219.                 style: {  // 文字样式，可以设置文字颜色、字体、字号，注意和css有略微的不同
  220.                     color: 'black'
  221.                 }
  222.                 // floating 是否浮动，设置浮动后，标题将不占用图表区位置
  223.                 // margin 标题和图表区的间隔，当有副标题时，表示标题和副标题之间的间隔
  224.             },
  225.             subtitle: {
  226.                 text: '我是副标题'
  227.             },
  228.             credits: { // 版权信息
  229.                 text: 'HCharts.cn', // 显示的版权信息文字
  230.                 href: 'http://www.hcharts.cn' // 版权信息点击之后指向的URL （设置自己版权信息地址时记得加 “http://“ ）
  231.                 // enabled    是否显示版权信息
  232.             }
  233.  
  234.         });
  235.     </script>
  236.  
  237. </html>

Highcharts › 自由绘图的更多相关文章

  1. 简易的highcharts公共绘图模块封装--基于.net mvc

    运行效果: 之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,Demo丰富,配置使用简单.具体内容请登录中文官网:http://www.hcharts.cn/ 项目详细: 项目环境 ...

  2. Java基础之在窗口中绘图——利用多态性使用鼠标自由绘图（Sketcher 7 with a crosshair cursor）

    控制台程序. 在Sketcher中创建形状时,并不知道应该以什么顺序创建不同类型的形状,这完全取决于使用Sketcher程序生成草图的人.因此需要绘制形状,对它们执行其他操作而不必知道图形是什么.当然 ...

  3. R语言学习笔记（五）绘图(1)

      R是一个惊艳的图形构建平台,这也是R语言的强大之处.本文将分享R语言简单的绘图命令.   本文所使用的数据或者来自R语言自带的数据(mtcars)或者自行创建.   首先,让我们来看一个简单例子: ...

  4. [2014.01.27]wfImage 图像处理组件 3.3

    组件支持多种图片格式,包括bmp,jpg,gif,wmf,emf,ico,png,pcx,tif,tga,pcx,dcx等. 组件提供两种输出接口,包括保存,直接显示(您再也不用定时清理那些临时的垃圾 ...

  5. EPLAN Electric P8 2.0即将到来,着实令人期待-转caodaping

    在今年的4月份,2.0版本的EPLAN Electric P8 首次揭开其神秘面纱,见诸于世.它的展露,再次印证了EPLAN 软件平台朝着"更实用"这一方向发展,同时也证明&quo ...

  6. 大型三甲医院管理系统源码PACS超声科室源码DICOM影像工作站

    详情点击查看 开发环境 :VS2008 + C# + SQL2000 功能简介 1.患者登记工作站 集中登记患者基本信息和检查信息,包括就诊方式.患者来源.检查类型.检查部位.申请科室.申请医生等.可 ...

  7. 探索canvas画布绘制技术

    图片来自KrzysztofBanaś 下面我们开始尝试研究不同的绘图风格和技术 - 边缘平滑,贝塞尔曲线,墨水和粉笔,笔和印章和图案 -等等.事实证明,网上没有太多关于此的内容.在下面的示例中,您请大 ...

  8. 06 Windows编程——设备句柄 和 WM_PAINT消息

    windows程序在现实方式上属于图形方式,和文字方式的显示,有显著的不同. 什么是设备句柄,如何获取 使用统一的数据结构表示某一设备,这个结构就是设备句柄. 源码 #include<Windo ...

  9. 绘图之EasyUI+Highcharts+Django

    前言: 在web开发过程中经常会出现图表展示数据的业务需求,如何把数据通过图表的形式,展示在页面上呢?本文将结合EasyUI.Highcharts.Django做一个简单的图表展示web应用: 一.E ...

随机推荐

  1. CSS 小技巧 | 一行代码实现头像与国旗的融合

    到国庆了,大家都急着给祖国母亲庆生. 每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款: emm,很不错. 那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用 CSS 如何 ...

  2. 轻量级 Java 基础开发框架，Solon & Solon Cloud 1.5.40 发布

    Solon 已有120个生态扩展插件,此次版本以细节打磨为主: 增加 mybatisplus-solon-plugin 插件 //至此,Solon 已完成国内外主流的5个ORM框架插件适配 插件 so ...

  3. 4-让线程睡眠的sleep方法

    让线程睡眠的sleep方法 Thread类有一个静态的sleep方法,当一个执行中的线程调用了Thread的sleep方法,调用线程就会让出指定时间的执行权,也就是在这期间不参与CPU调度,但是该线程 ...

  4. mysql从零开始之MySQL UPDATE 更新

    MySQL UPDATE 更新 如果我们需要修改或更新 MySQL 中的数据,我们可以使用 SQL UPDATE 命令来操作. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用 SQ ...

  5. 前端规范之Git工作流规范（Husky + Comminilint + Lint-staged）

    代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一 ...

  6. 由于坏块导致DG的mrp0进程中断

    由于坏块导致DG的mrp0进程中断1.Environment11.2.0.4 ADG 2.SymptomsDG的mrp0进程中断,重启后,还是卡住.查看alert,在1.47存在报错,进一步查看trc ...

  7. WIN10下的VMware与Docker冲突的解决方案

    VMARE版本升级到15.5以上 WIN10升级到2004版本以上 Hyper-V为开启状态

  8. 题解 [NOI2019]弹跳

    题目传送门 题目大意 给出 \(n\) 做城市,每座城市都有横纵坐标 \(x,y\).现在给出 \(m\) 个限制 \(p,t,l,r,d,u\),表示从 \(p\) 城市出发,可以花费 \(t\) ...

  9. 01_vue实例_数据_方法

    创建实例 var vm = new Vue( { //选项 } ) 数据对象 // 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = ...

  10. FastAPI 学习之路（二）

    之前的文章已经介绍了如何安装,以及简单的使用,这篇文章呢,我们就不去分享如何安装对应的包了. 我们如何去编写呢,其实很简单,按照下面的步骤,一个简单的基于fastapi的接口就编写完毕. 首先:创建一 ...