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 ...
随机推荐
- 实验2：Open vSwitch虚拟交换机实践
作业链接:实验2:Open vSwitch虚拟交换机实践 一.实验目的 能够对Open vSwitch进行基本操作: 能够通过命令行终端使用OVS命令操作Open vSwitch交换机,管理流表: 能 ...
- T-SQL——透视PIVOT动态获取待扩展元素集
目录 0.背景说明 1.准备测试数据 2.示例1--利用SELECT循环赋值 3.示例2--使用游标 4.示例3--使用FOR XML PATH() 5. 参考 志铭-2021年10月8日 00:57 ...
- 憋了很久,终于弄懂什么是IOC(控制反转)
导航 共享充电宝 IOC思想 复杂的依赖关系 IOC定义 Spring中的IOC IOC与工厂模式 IOC容器的技术剖析 结语 参考 本节是摘自<Spring Boot 实战纪实>的第 ...
- Interrupted Exception异常可能没你想的那么简单！
摘要: 当我们在调用Java对象的wait()方法或者线程的sleep()方法时,需要捕获并处理InterruptedException异常.如果我们对InterruptedException异常处理 ...
- spring 创建Bean最全实现方法
创建bean方式,spring创建bean的方式包含:自动注入方式和人工注入方式.分别为:1)xml 配置化方式 2)@bean注解注入方式3)@Component方式 4)接口注入方式 5)imp ...
- oracle数据导入"HIST_GRAM_LIST_ITEM"问题处理
1.问题显示 处理对象类型 SCHEMA_EXPORT/TABLE/CONSTRAINT/REF_CONSTRAINT ORA-39083: 对象类型 REF_CONSTRAINT 创建失败, 出现错 ...
- 从零入门 Serverless | SAE 的远程调试和云端联调
作者 | 弈川 阿里巴巴云原生团队 导读:本节课程包含三部分内容,前两个部分简单介绍远程调试以及端云联调的原理,最后在 Serverless 应用引擎中进行实际演示. 经过之前课程的学习,相信大家对于 ...
- 【UE4】GAMES101 图形学作业2：光栅化和深度缓存
总览 在上次作业中,虽然我们在屏幕上画出一个线框三角形,但这看起来并不是那么的有趣.所以这一次我们继续推进一步--在屏幕上画出一个实心三角形,换言之,栅格化一个三角形.上一次作业中,在视口变化之后,我 ...
- 【c++ Prime 学习笔记】第15章 面向对象程序设计
15.1 OOP:概述 面向对象程序设计(object-oriented programming)的核心思想是:数据抽象.继承.动态绑定 使用数据抽象,可将类的接口与实现分离 使用继承,可定义相似的类 ...
- Java：并发笔记-09
Java:并发笔记-09 说明:这是看了 bilibili 上 黑马程序员 的课程 java并发编程 后做的笔记 7. 共享模型之工具-2 原理:AQS 原理 对于 AQS 的原理这部分内容,没很好的 ...