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 ...
随机推荐
- Hyper-V CPU设置
前言 最近在用Hyper-V测试项目,发现在运行过程中发现项目总数崩掉,几经发现有一个共性,CPU占用率100%,分析问题发现问题出在Hyper-V CPU设置上,Hyper-V装系统就不赘述了,网上 ...
- 题解 P6454 麻将 加强版
题目传送门 题目大意 不想写了,直接看题面吧. 思路 被这个题搞自闭了,因为读错题目想一个非常恶心的东西想了一场考试,然后就删代码,然后就被骂了.哎. 需要注意的是:我们只能选一次雀头 于是,不难看出 ...
- 题解 「THUPC 2017」小 L 的计算题 / Sum
题目传送门 题目大意 给出 \(a_{1,2,...,n}\),对于 \(\forall k\in [1,n]\) ,求出: \[\sum_{i=1}^{n}a_i^k \] \(n\le 2\tim ...
- 项目问题记录------Mabatis动态sql语句
现在在做一个模糊查询功能,使用两个查询条件: 条件1:下拉框选择的产品名 条件2:输入框输入的用户名 需求1:下拉框的选项是从数据库里导出来的产品名,此外,添加一个选项"全部产品" ...
- 【UE4 C++】Print、Delay、ConsoleCommand
基于UKismetSystemLibrary PrintString /** * Prints a string to the log, and optionally, to the screen * ...
- 如何获取ISO8601定义的Work Week
工作中遇到一个需求,需要在打印标签的时候打印生产当天的工作周.工作周按照ISO-8601定义的标准计算.找到两种方案. Excel函数 C#代码 Excel函数 非常简单,调用一个Excel自带函数就 ...
- UltraSoft - Beta - Scrum Meeting 5
Date: May 21st, 2020. Scrum 情况汇报 进度情况 组员 负责 今日进度 q2l PM.后端 修复了课程通知链接的bug Liuzh 前端 暂无 Kkkk 前端 增加消息中心板 ...
- [Beta]the Agiles Scrum Meeting 7
会议时间:2020.5.21 20:00 1.每个人的工作 今天已完成的工作 成员 已完成的工作 issue yjy 暂无 tq 新增功能:添加.选择.展示多个评测机,对新增功能进行测试 评测部分增加 ...
- Spring Cloud Alibaba整合Sentinel
Spring Cloud Alibaba 整合 Sentinel 一.需求 二.实现步骤 1.下载 sentinel dashboard 2.服务提供者和消费者引入sentinel依赖 3.配置控制台 ...
- 修改git仓库的远程地址
在我们开发的过程中,代码一般是由 git 来管理的,但有些时候我们的 git 仓库的地址可能发生了变换,比如我们使用的 gitLab 地址发生了变化,那么这个时候如何来将原项目的 git 地址进行修改 ...