zoukankan      html  css  js  c++  java
  • 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=" 100%; height: 100%; margin: 0 auto"></div>
            <!-- 图像大小 -->
            <!--
                作者:offline
                时间:2019-07-05
                描述:
                宽  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, //
                                     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, //
                                     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, //
                                     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',
                                     '100px'
                                })
                                .add()
                                .shadow(true);
                            
                            ren.label('Batik // 蜡染', yj+55, jl+(jl*0.9)+90)
                                .attr({
                                    r: 5,
                                     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>
  • 相关阅读:
    函数指针_typedef
    网络学习_2
    网络学习_1
    字节序
    string相关总结
    C++ const用法总结
    U盘安装CentOS 7.0
    windows平台CodeBlocks MinGW C++11开发环境搭建
    关于32位windows与4GB内存的那些事儿
    开启win7系统关闭日志分析
  • 原文地址:https://www.cnblogs.com/mysterious-killer/p/11157577.html
Copyright © 2011-2022 走看看