用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: {
    }
});


相关文章
|
4月前
|
JavaScript 数据可视化 BI
echarts的使用 超好用的报表制作、数据的图形化展示
您提供的链接是关于echarts使用的博客文章,它介绍了如何使用echarts进行数据的图形化展示,包括制作报表和图表。echarts是一个强大的数据可视化工具,能够创建折线图、柱状图、饼图等多种图表类型。文章还提供了一个Demo演示和项目结构的图片,以及官网链接供读者参考。
echarts的使用 超好用的报表制作、数据的图形化展示
|
4月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现数据分析可视化大屏!!附源码!!
Echarts+JS实现数据分析可视化大屏!!附源码!!
|
7月前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表
|
7月前
|
数据可视化 前端开发
web前端-Echarts-5.3高级可视化和图表组合布局
web前端-Echarts-5.3高级可视化和图表组合布局
|
数据可视化
Echarts动态数据可视化学习(2)柱状图和折线图的动态数据更新
Echarts动态数据可视化学习(2)柱状图和折线图的动态数据更新
213 0
|
7月前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
数据可视化 定位技术
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
269 0
漏刻有时数据可视化Echarts组件开发(22):echarts高端地图交互美化
|
前端开发 JavaScript API
数据展示前端框架Highcharts介绍
数据展示前端框架Highcharts介绍
|
数据可视化
漏刻有时数据可视化Echarts组件开发(20):动态数据 + 时间坐标轴
漏刻有时数据可视化Echarts组件开发(20):动态数据 + 时间坐标轴
148 0
|
JSON 数据可视化 API
2019-nCov疫情实时趋势数据可视化Echarts学习(3):JSON数据和echarts柱图和折线图表的开发
2019-nCov疫情实时趋势数据可视化Echarts学习(3):JSON数据和echarts柱图和折线图表的开发
109 0
下一篇
DataWorks