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 ...
随机推荐
- Python下载课件
from urllib.request import urlretrieve # #下载网络文件到本地 import os os.chdir("C:/Users/RankFan/Deskto ...
- Windows Terminal 和 WSL
Windows Terminal ,配置启动目录为 WSL : \\wsl$\Ubuntu\home
- 974.和可被K整除的子数组
题目 给定一个整数数组 A,返回其中元素之和可被 K 整除的(连续.非空)子数组的数目. 示例: 输入:A = [4,5,0,-2,-3,1], K = 5 输出:7 解释: 有 7 个子数组满足其元 ...
- Go语言核心36讲（Go语言进阶技术七）--学习笔记
13 | 结构体及其方法的使用法门 我们都知道,结构体类型表示的是实实在在的数据结构.一个结构体类型可以包含若干个字段,每个字段通常都需要有确切的名字和类型. 前导内容:结构体类型基础知识 当然了,结 ...
- 一文看懂JVM内存区域分布与作用
那么我们在开始介绍Java内存区域之前,我们先放一张内存区域的图,方便我们后面介绍的时候可以对照着看. 须知,本文是根据JDK8来介绍的. 程序计数器 首先它是线程私有的,它也称为代码的行号指示器,字 ...
- 2021北航敏捷软工Beta阶段评分与总结
概述 Beta 阶段评分,按照之前的规则,主要组成部分为: 博客部分,基于 Beta 阶段博客的评分(每篇正规博客 10 分,每篇 Scrum5 分,评定方式类比往年) 评审部分,基于 Beta 阶段 ...
- Asp.net Core C#进行筛选、过滤、使用PredicateBuilder进行动态拼接lamdba表达式树并用作条件精准查询，模糊查询
在asp.net core.asp.net 中做where条件过滤筛选的时候写的长而繁琐不利于维护,用PredicateBuilder进行筛选.过滤.LInq配合Ef.core进行动态拼接lamdba ...
- 2019.03.27【GDOI2019】模拟 T3
题目大意 给出$n$, $p$, 求有多少长度为$n$的排列可以被分成三个上升子序列, 数量对$p$取模, 数据范围 $3 \leq n \leq 500$. 思路 首先让我们考虑如果有一个排列,如何 ...
- Py高级函数和方法
Map() Redece() Dir() __len__ ---->>> len() getattr().setattr() 以及 hasattr() 参考廖雪峰----- ...
- linux tr
转载:tr命令_Linux tr 命令用法详解:将字符进行替换压缩和删除 (linuxde.net) tr命令 文件过滤分割与合并 tr命令可以对来自标准输入的字符进行替换.压缩和删除.它可以将一组字 ...