...

  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. 常见错误0xCCCCCCCCC 读取字符串的字符时出错及其引申。

    问题描述在一个函数调用中,使用二级指针作为函数参数,传递一个字符串指针数组,但是在访问的时候,却出现了运行时错误,具体表现为"0xCCCCCCCC 读取字符串的字符时出错". 第一 ...

  2. Google Chrome打开权限设置开关(摄像头,录音等)

    在搜索框输入以下字符 chrome://flags/#unsafely-treat-insecure-origin-as-secure

  3. Dapr + .NET Core实战(十三)跨语言开发

    因为基于Dapr的服务架构是不限语言的,我们来看看Dapr的跨语言开发.我们使用golang,python,.NET来实现跨语言的服务调用,拓扑如下 我们继续使用.NET 5的fontend和back ...

  4. SAE助力南瓜电影7天内全面Severless

    作者:李刚(寻如),阿里云解决方案架构师 南瓜电影APP是国内领先的专注于影视精品化运营的垂直类视频产品,在移动互联网.IPTV.OTT等客户端,面向广大中产阶级精英群体,提供有异于院线及其他视频平台 ...

  5. kvm安装window系统及使用NFS动态迁移

    验证是否开启虚拟化 # grep -E 'svm|vmx' /proc/cpuinfo - vmx is for Intel processors - svm is for AMD processor ...

  6. 【c++ Prime 学习笔记】第1章 开始

    1.1 编写一个简单的程序 int main() { return 0; } 函数 包含4部分: 返回类型(return type) 函数名(function name) 形参列表(parameter ...

  7. Mybatis 动态批量修改

    封面:学校夜景 xdm,祝大家节日快乐!! 今天听<路过人间>演唱会Live限定版,爱上了一句歌词. 说来惭愧,人对爱只学会,视死如归. 1.业务需求 如下: 前台传给我一个 docume ...

  8. Python使用阿里云OSS服务

    Python使用阿里云OSS服务 前言: 在远程搭建了一个平台,通过改远程平台进行数据的采集,需要将数据内容传送至本地进行处理:为了实现该功能,考虑了阿里云的OSS对象储存的服务. 40G包月只需1元 ...

  9. 第三次Alpha Scrum Meeting

    本次会议为Alpha阶段第三次Scrum Meeting会议 会议概要 会议时间:2021年4月26日 会议地点:线上会议 会议时长:20min 会议内容简介:本次会议主要由每个人展示自己目前完成的工 ...

  10. springcloud整合seata

    springcloud整合seata 一.背景 二.项目结构 三.实现功能: 四.项目使用到的技术 五.整合步骤 1.引入spring-cloud-starter-alibaba-seata jar包 ...