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 ...
随机推荐
- Electron+Vue+ElementUI开发环境搭建
Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...
- 解析csv数据绘制曲线图
一个解析csv数据的小工具,所做项目中要查看脉冲图谱,经理就让我这个刚入职的小萌新写了个小程序.同事将csv格式的脉冲数据发给我,我的想法就是,将这些csv里的数据作为纵轴,x++为横轴,绘制出折线图 ...
- 中国唯一入选 Forrester 领导者象限，阿里云 Serverless 全球领先
3 月 26 日消息,权威咨询机构 Forrester 发布 2021 年第一季度 FaaS 平台评估报告,阿里云函数计算凭借在产品能力.安全性.战略愿景和市场规模等方面的优势脱颖而出,产品能力位列全 ...
- Serverless 架构到底要不要服务器？
作者 | aoho 来源 | Serverless 公众号 Serverless 是什么? Serverless 架构是不是就不要服务器了?回答这个问题,我们需要了解下 Serverless 是什么. ...
- React Native之新架构中的Turbo Module实现原理分析
有段时间没更新博客了,之前计划由浅到深.从应用到原理,更新一些RN的相关博客.之前陆续的更新了6篇RN应用的相关博客(传送门),后边因时间问题没有继续更新.主要是平时空余时间都用来帮着带娃了,不过还是 ...
- 洛谷5038 [SCOI2012]奇怪的游戏（二分+网络流+判断奇偶）
寒假的时候就听过这个题.但是一直没有写. qwq 首先,我们发现题目中的图是个网格图,然后每次可以将相邻两个格子加一. 很容易就想到是黑白染色.那么每次操作,就相当于同时操作一个白点,一个黑点. 我们 ...
- 小数的十进制和二进数转换 “无限不循环”小数的IEEE 754表示
十进制 -> 二进制 将整数部分和小数部分分开处理 例:3.125(10) 其整数部分为11(2) 小数部分按照下面的步骤求解: 0.125 x 2 = 0.25 取0 0.250 x 2 = ...
- 痞子衡嵌入式：超级下载算法RT-UFL v1.0在恩智浦MCUXpresso IDE下的使用
痞子衡主导的"学术"项目 <RT-UFL - 一个适用全平台i.MXRT的超级下载算法设计> v1.0 版发布近 4 个月了,部分客户已经在实际项目开发调试中用上了这个 ...
- springboot 事务执行全流程分析
springboot 事务执行全流程分析 目录 springboot 事务执行全流程分析 1. 事务方法执行前的准备工作 2. 业务代码的调用 3. 事务方法执行后处理 4. 业务代码在事务和非事务中 ...
- Vue2源码解读 - 响应式原理及简单实现
直接进入主题了,想必大家都知道实现vue响应式核心方法就是 Object.defineProperty,那就从它开始说 Object.defineProperty 缺点: 深度监听,需要递归到底,一次 ...