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>
时刻告诉自己，自己是个菜鸡......
