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 ...
随机推荐
- HTML的一些技巧
清除form表单 this.$refs.formName.resetFields() 验证表单 this.$refs.createForm.validate((valid) => {}) 当im ...
- MD5加密算法的实现方式
MD5加密算法 MD5在我们平时项目中运用比较多,尤其是在用户注册的时候,密码存入数据库时可以利用MD5算法加密后存入,可以保证数据的安全性. 代码实现 public final class Md5U ...
- Go语言之数组与切片基础
一.数组 数组是同一类型元素的集合,可以放多个值,但是类型一致,内存中连续存储 Go 语言中不允许混合不同类型的元素,而且数组的大小,在定义阶段就确定了,不能更改 1.数组的定义 // 定义一个大小为 ...
- JDK源码阅读(3)：AbstractStringBuilder、StringBuffer、StringBuilder类阅读笔记
AbstractStringBuilder abstract class AbstractStringBuilder implements Appendable, CharSequence{ ... ...
- 题解 Yuno loves sqrt technology II
题目传送门 题目大意 有\(n\)个数,\(m\)个查询,每次查询一个区间内的逆序对个数. \(n,m\le 10^5\) 思路 其实是为了锻炼二次离线才做这道题的. 不难想到可以有一个\(\Thet ...
- leetcode 6/300 Z字型变换 py
目录 题目说明 方法一:利用flag 题目说明 方法一:利用flag 简单来说就是利用flag来表示方向,真的神来之笔. class Solution: def convert(self, s: st ...
- 这一篇 K8S（Kubernetes）我觉得可以了解一下！！！
点赞再看,养成习惯,微信搜索[牧小农]关注我获取更多资讯,风里雨里,小农等你,很高兴能够成为你的朋友. 什么是Kubernetes? Kubernetes 是Google开源的分布式容器管理平台,是为 ...
- web性能检测工具lighthouse
About Automated auditing, performance metrics, and best practices for the web. Lighthouse 可以自动检查Web页 ...
- Xpath运算符
5.position定位 >>print tree.xpath('//*[@id="testid"]/ol/li[position()=2]/text()')[0] & ...
- 集合栈 牛客网 程序员面试金典 C++ Python
集合栈 牛客网 程序员面试金典 C++ Python 题目描述 请实现一种数据结构SetOfStacks,由多个栈组成,其中每个栈的大小为size,当前一个栈填满时,新建一个栈.该数据结构应支持与普通 ...