Highcharts › 自由绘图
...
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Highcharts</title>
- </head>
- <body>
- <script src="https://code.highcharts.com/highcharts.js"></script>
- <script src="https://code.highcharts.com/modules/exporting.js"></script>
- <!--<script src="https://code.highcharts.com.cn/highcharts/themes/grid.js"></script> <!--主题: dark-unica.js -->
- <!--<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script> -->
- <div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>
- <!-- 图像大小 -->
- <!--
- 作者:offline
- 时间:2019-07-05
- 描述:
- 宽 width: 800, 高 height: 600,
- -->
- </body>
- <script>
- var w = window.innerWidth || document.documentElement.clientWidth;
- var h = window.innerHeight || document.documentElement.clientHeight;
- var zhingjianzhi = w/2;
- var yj = w*0.3; // 意见的最大值
- var yjzjz = yj/2; // 意见的中间值
- var hf = w*0.65; // 回复的中间值
- var jl = h*0.1; // 距离上下的值
- var zi_k = 84; // 六个字有 84 左右
- var zi_g = 28; // 六个字有 84 左右
- var ygz_k = 13; // 意见 = 26*18
- var ygz_g = 9; // 意见 = 26*18
- var jt = 100; // 箭头长度为100
- console.log(yj-(jt/2));
- console.log(jl+(zi_g/2)+(jl*0.9));
- // 图表样式 // https://www.highcharts.com.cn/docs/basic-chart
- Highcharts.setOptions({
- lang:{
- contextButtonTitle:"图表导出菜单",
- decimalPoint:".",
- downloadJPEG:"下载JPEG图片",
- downloadPDF:"下载PDF文件",
- downloadPNG:"下载PNG文件",
- downloadSVG:"下载SVG文件",
- drillUpText:"返回 {series.name}",
- loading:"加载中",
- months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
- noData:"没有数据",
- numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
- printChart:"打印图表",
- resetZoom:"恢复缩放",
- resetZoomTitle:"恢复图表",
- shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
- thousandsSep:",",
- weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六","星期天"]
- }
- });
- Highcharts.chart('container', {
- chart: {
- backgroundColor: 'white',
- events: {
- load: function() { // 图表加载完后事件,效果见
- // Draw the flow chart
- //绘制流程图
- var ren = this.renderer,
- colors = Highcharts.getOptions().colors,
- rightArrow = ['M', 0, 0, 'L', 100, 0,'L',95,5,'M', 100, 0,'L',95,-5]; // 右箭头
- // Separator, CLI from service
- // 分隔符,来自服务的CLI
- // ?,上面点的值,上下隔开的值,?,下面点的值,多长
- ren.path(['M', yj, 40, 'L', yj, h]) // 绘制路径
- // 包括: (M) 移动、(L) 画线、 (C) 画曲线 和 (Z)关闭。
- .attr({
- 'stroke-width': 2,
- stroke: 'silver',
- dashstyle: 'dash'
- })
- .add();
- // 左右,上下
- ren.label('意见', yjzjz-ygz_k, jl) // 绘制标签
- // https://api.highcharts.com.cn/highcharts#Renderer.label
- .css({
- fontWeight: 'bold'
- })
- .add();
- ren.label('回复', w*0.65, jl)
- .css({
- fontWeight: 'bold'
- })
- .add();
- // 名称, 左右的值,上下的值
- ren.label('六六六六六六', yjzjz-(zi_k/2), jl+(jl*0.9))
- .attr({
- fill: colors[0],
- stroke: 'white',
- 'stroke-width': 2,
- padding: 5,
- r: 5
- })
- .css({
- color: 'white'
- })
- .add()
- .shadow(true);
- // 名称, (左右),(上下)
- // 不要等到错过才知珍惜,不要等到失去才知后悔。不要等要离开那一刻才懂,不论吵成什么样,只要要分离,就什么都可以原谅,这才是爱啊!<br/>
- // 无论发生了多大的事,忍一忍,一切都会过去的。现实是残酷的,可生活是美好的,我们要学会在残酷中享受美好。
- // 字数太多需要加 <br/> ,考虑 退回的问题,
- ren.label('PhantomJS // 幻影', yj+55, jl+(jl*0.9)) // 幻影 PhantomJS
- .attr({
- r: 5, // 宽
- width: w-(yj+60)-30, // 长
- fill: colors[1]
- })
- .css({
- color: 'white', // 颜色
- fontWeight: 'bold'
- })
- .add();
- ren.label('PhantomJS // 幻影', yj+55, jl+(jl*0.9)+30) // 幻影 PhantomJS
- .attr({
- r: 5, // 宽
- width: w-(yj+60)-30, // 长
- fill: colors[1]
- })
- .css({
- color: 'white', // 颜色
- fontWeight: 'bold'
- })
- .add();
- ren.label('PhantomJS // 幻影', yj+55, jl+(jl*0.9)+(30*2)) // 幻影 PhantomJS
- .attr({
- r: 5, // 宽
- width: w-(yj+60)-30, // 长
- fill: colors[1]
- })
- .css({
- color: 'white', // 颜色
- fontWeight: 'bold'
- })
- .add();
- // 向右的箭头
- ren.path(['M', 0, 0, 'L', 100, 0,'L',95,5,'M', 100, 0,'L',95,-5])
- .attr({
- 'stroke-width': 2, // 多粗
- stroke: colors[5] // 颜色
- })
- .translate(yj-(jt/2), jl+(zi_g/2)+(jl*0.9)) // 左右 ,上下
- .add();
- // 向下的箭头
- ren.path(['M', yjzjz, jl+(jl*0.9)+30, 'L', yjzjz, jl+(jl*0.9)+80,
- 'L', yjzjz-5, jl+(jl*0.9)+75,'M', yjzjz, jl+(jl*0.9)+80,'L', yjzjz+5, jl+(jl*0.9)+75])
- .attr({
- 'stroke-width': 2,
- stroke: colors[3]
- })
- .add();
- ren.label('11六六六六六', yjzjz-(zi_k/2), jl+(jl*0.9)+90)
- .attr({
- fill: colors[0],
- stroke: 'white',
- 'stroke-width': 2,
- padding: 5,
- r: 5
- })
- .css({
- color: 'white',
- width: '100px'
- })
- .add()
- .shadow(true);
- ren.label('Batik // 蜡染', yj+55, jl+(jl*0.9)+90)
- .attr({
- r: 5,
- width: 100,
- fill: colors[1]
- })
- .css({
- color: 'white',
- fontWeight: 'bold'
- })
- .add();
- // 向右的箭头
- ren.path(['M', 0, 0, 'L', 100, 0,'L',95,5,'M', 100, 0,'L',95,-5])
- .attr({
- 'stroke-width': 2, // 多粗
- stroke: colors[5] // 颜色
- })
- .translate(yj-(jt/2), jl+(zi_g/2)+(jl*0.9)+90) // 左右 ,上下
- .add();
- // 向下的箭头
- ren.path(['M', yjzjz, jl+(jl*0.9)+30+90, 'L', yjzjz, jl+(jl*0.9)+80+90,
- '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])
- .attr({
- 'stroke-width': 2,
- stroke: colors[3]
- })
- .add();
- }
- }
- },
- title: {
- text: 'HighCharts导出服务器概述',
- style: { // 文字样式,可以设置文字颜色、字体、字号,注意和css有略微的不同
- color: 'black'
- }
- // floating 是否浮动,设置浮动后,标题将不占用图表区位置
- // margin 标题和图表区的间隔,当有副标题时,表示标题和副标题之间的间隔
- },
- subtitle: {
- text: '我是副标题'
- },
- credits: { // 版权信息
- text: 'HCharts.cn', // 显示的版权信息文字
- href: 'http://www.hcharts.cn' // 版权信息点击之后指向的URL (设置自己版权信息地址时记得加 “http://“ )
- // enabled 是否显示版权信息
- }
- });
- </script>
- </html>
Highcharts › 自由绘图的更多相关文章
- 简易的highcharts公共绘图模块封装--基于.net mvc
运行效果: 之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,Demo丰富,配置使用简单.具体内容请登录中文官网:http://www.hcharts.cn/ 项目详细: 项目环境 ...
- Java基础之在窗口中绘图——利用多态性使用鼠标自由绘图(Sketcher 7 with a crosshair cursor)
控制台程序. 在Sketcher中创建形状时,并不知道应该以什么顺序创建不同类型的形状,这完全取决于使用Sketcher程序生成草图的人.因此需要绘制形状,对它们执行其他操作而不必知道图形是什么.当然 ...
- R语言学习笔记(五)绘图(1)
R是一个惊艳的图形构建平台,这也是R语言的强大之处.本文将分享R语言简单的绘图命令. 本文所使用的数据或者来自R语言自带的数据(mtcars)或者自行创建. 首先,让我们来看一个简单例子: ...
- [2014.01.27]wfImage 图像处理组件 3.3
组件支持多种图片格式,包括bmp,jpg,gif,wmf,emf,ico,png,pcx,tif,tga,pcx,dcx等. 组件提供两种输出接口,包括保存,直接显示(您再也不用定时清理那些临时的垃圾 ...
- EPLAN Electric P8 2.0即将到来,着实令人期待-转caodaping
在今年的4月份,2.0版本的EPLAN Electric P8 首次揭开其神秘面纱,见诸于世.它的展露,再次印证了EPLAN 软件平台朝着"更实用"这一方向发展,同时也证明&quo ...
- 大型三甲医院管理系统源码PACS超声科室源码DICOM影像工作站
详情点击查看 开发环境 :VS2008 + C# + SQL2000 功能简介 1.患者登记工作站 集中登记患者基本信息和检查信息,包括就诊方式.患者来源.检查类型.检查部位.申请科室.申请医生等.可 ...
- 探索canvas画布绘制技术
图片来自KrzysztofBanaś 下面我们开始尝试研究不同的绘图风格和技术 - 边缘平滑,贝塞尔曲线,墨水和粉笔,笔和印章和图案 -等等.事实证明,网上没有太多关于此的内容.在下面的示例中,您请大 ...
- 06 Windows编程——设备句柄 和 WM_PAINT消息
windows程序在现实方式上属于图形方式,和文字方式的显示,有显著的不同. 什么是设备句柄,如何获取 使用统一的数据结构表示某一设备,这个结构就是设备句柄. 源码 #include<Windo ...
- 绘图之EasyUI+Highcharts+Django
前言: 在web开发过程中经常会出现图表展示数据的业务需求,如何把数据通过图表的形式,展示在页面上呢?本文将结合EasyUI.Highcharts.Django做一个简单的图表展示web应用: 一.E ...
随机推荐
- 常见错误0xCCCCCCCCC 读取字符串的字符时出错及其引申。
问题描述在一个函数调用中,使用二级指针作为函数参数,传递一个字符串指针数组,但是在访问的时候,却出现了运行时错误,具体表现为"0xCCCCCCCC 读取字符串的字符时出错". 第一 ...
- Google Chrome打开权限设置开关(摄像头,录音等)
在搜索框输入以下字符 chrome://flags/#unsafely-treat-insecure-origin-as-secure
- Dapr + .NET Core实战(十三)跨语言开发
因为基于Dapr的服务架构是不限语言的,我们来看看Dapr的跨语言开发.我们使用golang,python,.NET来实现跨语言的服务调用,拓扑如下 我们继续使用.NET 5的fontend和back ...
- SAE助力南瓜电影7天内全面Severless
作者:李刚(寻如),阿里云解决方案架构师 南瓜电影APP是国内领先的专注于影视精品化运营的垂直类视频产品,在移动互联网.IPTV.OTT等客户端,面向广大中产阶级精英群体,提供有异于院线及其他视频平台 ...
- kvm安装window系统及使用NFS动态迁移
验证是否开启虚拟化 # grep -E 'svm|vmx' /proc/cpuinfo - vmx is for Intel processors - svm is for AMD processor ...
- 【c++ Prime 学习笔记】第1章 开始
1.1 编写一个简单的程序 int main() { return 0; } 函数 包含4部分: 返回类型(return type) 函数名(function name) 形参列表(parameter ...
- Mybatis 动态批量修改
封面:学校夜景 xdm,祝大家节日快乐!! 今天听<路过人间>演唱会Live限定版,爱上了一句歌词. 说来惭愧,人对爱只学会,视死如归. 1.业务需求 如下: 前台传给我一个 docume ...
- Python使用阿里云OSS服务
Python使用阿里云OSS服务 前言: 在远程搭建了一个平台,通过改远程平台进行数据的采集,需要将数据内容传送至本地进行处理:为了实现该功能,考虑了阿里云的OSS对象储存的服务. 40G包月只需1元 ...
- 第三次Alpha Scrum Meeting
本次会议为Alpha阶段第三次Scrum Meeting会议 会议概要 会议时间:2021年4月26日 会议地点:线上会议 会议时长:20min 会议内容简介:本次会议主要由每个人展示自己目前完成的工 ...
- springcloud整合seata
springcloud整合seata 一.背景 二.项目结构 三.实现功能: 四.项目使用到的技术 五.整合步骤 1.引入spring-cloud-starter-alibaba-seata jar包 ...