用highcharts展现你的数据(二)

简介: 用highcharts展现你的数据(二)

配置选项:



全局配置:


Highcharts.setOptions({
    // 全局配置并不适合所有图表。
    "global": {
        // VML所需要的图像路径正则,以便来绘制径向渐变
        "VMLRadialGradientURL": "http://code.highcharts.com/{version}/gfx/vml-radial-gradient.png",
        // 附加文件的URL为Android 2设备延迟加载。这些设备不支持SVG,所以我们下载一个helper文件,其中包含canvg,依赖rbcolor,和canvg渲染器类。为了避免外连接我们的网站,您可以安装canvas-tools。js在您自己的服务器,并相应地改变这个选项。
        "canvasToolsURL": "http://code.highcharts.com/{version}/modules/canvas-tools.js",
        // 分钟的时区偏移。Positive的值为西方的UTC,negative的值为东方的UTC,正如ECMAScript中的getTimezoneOffset方法。使用这个来显示基于UTC的数据在一个预定义的时区。
        "timezoneOffset": 0,
        // 是否使用UTC时间轴缩放、tickmark Highcharts.dateFormat位置和时间显示。使用UTC的优点是,时间显示同样不管用户代理的时区设置。当地时间可以使用实时数据加载时或者当正确夏令时转换是必需的。
        "useUTC": true
    },
    // language
    "lang": {
        // 输出模块菜单。上下文菜单的工具提示标题打印和导出菜单项。
        "contextButtonTitle": "Chart context menu",
        // Highcharts.numberFormat方法默认使用小数点,除非另有函数参数中指定的方法。
        "decimalPoint": ".",
        // 导出模块。JPEG的文本下载菜单项。
        "downloadJPEG": "Download JPEG image",
        // 导出模块。PDF的文本下载菜单项。
        "downloadPDF": "Download PDF document",
        // 导出模块。PNG的文本下载菜单项。
        "downloadPNG": "Download PNG image",
        // 导出模块。PDF的文本下载菜单项。
        "downloadSVG": "Download SVG vector image",
        // 当按下按钮时显示的文本,链接回到父级。父级的名字是通过{ series.name }插入。
        "drillUpText": "Back to {series.name}",
        // 当图表处在加载状态时,紧接着调用chart.showLoading方法,然后加载提示文本出现的内容。
        "loading": "Loading...",
        // 一个数组,其中包含几个月的名字。对应于Highcharts.dateFormat方法的% B格式。
        "months": [ "January" , "February" , "March" , "April" , "May" , "June" , "July" , "August" , "September" , "October" , "November" , "December"],
        // 当chart没有数据时显示的内容
        "noData": "No data to display",
        // 公制前缀缩短大的数字用于轴标签。设置numericSymbols为null完全禁用缩短。
        "numericSymbols": [ "k" , "M" , "G" , "T" , "P" , "E"],
        // 菜单项的文本打印图表
        "printChart": "Print chart",
        // 放大图表是显示坐标文本
        "resetZoom": "Reset zoom",
        // 放大图表时显示工具提示标题
        "resetZoomTitle": "Reset zoom level 1:1",
        // months的简写
        "shortMonths": [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
        // Highcharts.numberFormat方法中默认数字分隔符
        "thousandsSep": ",",
        // 与months类似
        "weekdays": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
    }
});


图表配置:


$('#container').highcharts({
    // 图表的配置参数
    chart: {
        // 当绘制多条轴线时,每条轴线上都会自动添加不同的
        alignTicks: true,
        // 设置动画,当图表更新时
        animation: true,
        // 背景色
        backgroundColor:  '#FFFFFF',
        // 边框颜色
        borderColor: '#4572A7',
        // 边框圆角
        borderRadius: 5,
        // 边框宽度
        borderWidth: 0,
        // 给图表容器div添加class
        className: '',
        // 已废弃
        defaultSeriesType: 'line',
        // 操作图表的一些事件
        events: {
            // 当图表添加一条线时执行的事件
            addSeries: function() {},
            // 当点击图表时执行的事件
            click: function() {},
            // 当鼠标按下坐标轴标签时执行的事件
            drilldown: function() {},
            // 当鼠标抬起坐标轴标签时执行的事件
            drillup: function() {},
            // 当图表加载时执行的事件
            load: function() {},
            // 当图表重新绘制时执行的事件
            redraw: function() {},
            // 当选择图表时执行的事件
            selection: function() {}
        },
        // 图表高度
        height: null,
        // 忽略隐藏的轴线
        ignoreHiddenSeries: true,
        // x轴与y轴互换
        inverted: false,
        // 图表边框与绘图区域的外边距
        margin: [],
        // margin的下边距
        marginBottom: null,
        marginLeft: null,
        marginRight: null,
        marginTop: null,
        // 三维绘制图表的一些参数
        options3d: {
            // 透明度
            alpha: 0,
            // 旋转角度
            beta: 0,
            // 图像深度
            depth: 100,
            // 是否使用三维绘图
            enbaled: false,
            // 通过定义底部、前面、后面的面板来围绕图表绘制一个frame
            frame: {
                back: {
                    color: 'transparent',
                    size: 1
                },
                bottom: {
                    color: 'transparent',
                    size: 1
                },
                side: {
                    color: 'transparent',
                    size: 1
                }
            },
            viewDistance: 100
        },
        // 
        panKey: '',
        panning: false,
        pinchType: null,
        plotBackgroundColor: '',
        plotBackgroundImage: '',
        plotBorderColor: '#C0C0C0',
        plotBorderWidth: 0,
        plotShadow: false,
        polar: false,
        reflow: true,
        renderTo: '',
        resetZoomButton: {
            position: {},
            relativeTo: 'plot',
            theme: {}
        },
        selectionMarkerFill: rgba(69,114,167,0.25),
        shadow: false,
        showAxes: false,
        spacing: [10, 10, 15, 10],
        spacingBottom: 15,
        spacingLeft: 10,
        spacingRight: 10,
        spacingTop: 10,
        style: {},
        type: 'line',
        width: null,
        zoomType: ''
    },
    colors: [{}],
    credits: {
        enabled: true,
        href: 'http://www.highcharts.com',
        position: {
            align: 'right',
            x: -10,
            verticalAlign: 'bottom',
            y: -5
        },
        style: {
            cursor: 'pointer',
            color: '#909090',
            fontSize: '10px'
        },
        text: 'Highcharts.com'
    },
    drilldown: {
        activeAxisLabelStyle: {
            cursor: 'pointer',
            color: '#0d233a',
            fontWeight: 'bold',
            textDecoration: 'underline'
        },
        activeDataLabelStyle: {
            cursor: 'pointer',
            color: '#0d233a',
            fontWeight: 'bold',
            textDecoration: 'underline'
        },
        animation: null,
        drillUpButton: {
            position: '',
            relativeTo: 'plotBox',
            theme: ''
        },
        series: [],
    },
    exporting: {
        buttons: {
            contextButton: {
                align : 'right',
                enabled: true,
                height: 20,
                menuItems: [],
                onclick: function() {},
                symbol: 'menu',
                symbolFill: '#A8BF77',
                symbolSize: 14,
                symbolStroke: '#666',
                symbolStrokeWidth: 1,
                symbolX: 12.5,
                symbolY: 10.5,
                text: null,
                theme: null,
                verticalAlign: 'top',
                width: 24,
                x: -10,
                y: 0
            }
        },
        chartOptions: null,
        enabled: true,
        filename: 'chart',
        formAttributes: null,
        scale: 2,
        sourceHeight: null,
        sourceWidth: null,
        type: 'image/png',
        url: 'http://export.highcharts.com',
        width: null
    },
    labels: {
        items: [{
            html: null,
            style: null
        }],
        style: {
            color: '#3E576F'
        }
    },
    legend: {
        align: 'center',
        backgroundColor: null,
        borderColor: '#909090',
        borderRadius: 0,
        borderWidth: 0,
        enabled: true,
        floating: false,
        itemDistance: 20,
        itemHiddenStyle: {
            color: '#CCC'
        },
        itemHoverStyle: {
            color: '#000'
        },
        itemMarginBottom: 0,
        itemMarginTop: 0,
        itemStyle: {
             "color": "#333333",
             "cursor": "pointer", 
             "fontSize": "12px", 
             "fontWeight": "bold"
        },
        itemWidth: null,
        labelFormat: '{name}',
        labelFormatter: null,
        layout: 'horizontal',
        lineHeight: 16,
        margin: 15,
        maxHeight: null,
        padding: 8,
        reversed: false,
        rtl: false,
        shadow: false,
        // 已废弃
        style: null,
        symbolHeight: 12,
        symbolPadding: 5,
        symbolRadius: 2,
        symbolWidth: 16,
        title: {
            style: {
                fontWeight: 'bold'
            },
            text: null
        },
        useHTML: false,
        verticalAlign: 'bottom',
        width: null,
        x: 0,
        y: 0
    },
    loading: {
        hideDuration: 100,
        labelStyle: {
            "fontWeight": "bold", 
            "position": "relative", 
            "top": "45%"
        },
        showDuration: 100,
        style: {
            position: 'absolute',
            backgroundColor: 'white',
            opacity: 0.5,
            textAlign: 'center'
        }
    },
    navigation: {
        buttonOptions: {
            align: 'right',
            enabled: true,
            height: 20,
            symbolFill: '#E0E0E0',
            symbolSize: 14,
            symbolStroke: '#666',
            symbolStrokeWidth: 1,
            symbolX: 12.5,
            symbolY: 10.5,
            text: null,
            theme: null,
            verticalAlign: 'top',
            width: 24,
            y: 0
        },
        menuItemHoverStyle: {
            background: '#4572A5',
            color: '#FFFFFF'
        },
        menuItemStyle: {
            padding: '0 5px',
            background: 'NONE',
            color: '#303030'
        },
        menuStyle: {
            border: '1px solid #A0A0A0',
            background: '#FFFFFF'
        }
    },
    noData: {
        attr: null,
        position: {
            "x": 0, 
            "y": 0, 
            "align": "center", 
            "verticalAlign": "middle"
        },
        style: {
            "fontSize": "12px", 
            "fontWeight": "bold", 
            "color": "#60606a"
        }
    },
    pane: {
        background: null,
        center: ["50%", "50%"],
        endAngle: null,
        startAngle: null
    },
    // 绘制图表参数,比如:柱状图,饼状图等
    plotOptions: {
    }
});


相关文章
|
机器学习/深度学习 运维 Python
python深度学习实现自编码器Autoencoder神经网络异常检测心电图ECG时间序列
python深度学习实现自编码器Autoencoder神经网络异常检测心电图ECG时间序列
|
Unix Linux C++
Linuxc/c++之信号基础
这篇文章详细介绍了Linux下C/C++信号的基本概念、产生原因、处理过程、分类、注册与发送方法,以及信号屏蔽的机制。
217 0
Linuxc/c++之信号基础
|
算法 知识图谱
ACL 2024 Oral:我们离真正的多模态思维链推理还有多远?
【9月更文挑战第5天】近年来,多模态思维链推理(MCoT)受到广泛关注,但现有基准仍面临诸多挑战。为此,研究人员提出了M$^3$CoT基准,旨在推动多领域、多步骤、多模态的推理能力发展。M$^3$CoT涵盖科学、数学等多个领域,要求模型进行多步骤推理,并结合文本和视觉信息。尽管当前视觉大语言模型(VLLMs)在M$^3$CoT上的表现不佳,但该基准为MCoT的发展提供了新机遇,未来可从模型改进、数据增强及知识融合等方面进行探索。论文详情见:https://arxiv.org/abs/2405.16473。
274 1
|
网络虚拟化 数据中心
ENSP的VLAN原理和配置命令
ENSP的VLAN原理和配置命令
595 2
ENSP的VLAN原理和配置命令
|
关系型数据库 MySQL PHP
wordpress博客系统详细安装部署教程
wordpress博客系统详细安装部署教程
wordpress博客系统详细安装部署教程
|
Windows
Windows 启动命令行的三种方式
Windows 平台启动命令行有多种方式,这里介绍三种
1652 0
Windows 启动命令行的三种方式
|
算法
红包随机算法,给定一定的金额,一定的人数,保证每个人都能随机获得一定的金额。...
红包随机算法,给定一定的金额,一定的人数,保证每个人都能随机获得一定的金额。...
472 0
|
Java
Java给指定URL字符串添加值和获取URL字符串中的参数值
Java给指定URL字符串添加值和获取URL字符串中的参数值
334 0
|
SQL NoSQL C#
基于C#的ArcEngine二次开发32:属性sql查询语句与IMap,ILayer,IFeatureLayer,IFeatureClass关系
基于C#的ArcEngine二次开发32:属性sql查询语句与IMap,ILayer,IFeatureLayer,IFeatureClass关系
基于C#的ArcEngine二次开发32:属性sql查询语句与IMap,ILayer,IFeatureLayer,IFeatureClass关系