首页 > 代码库 > 用highcharts展现你的数据

用highcharts展现你的数据

2024-10-22 16:27:39   203人阅读

摘要：

　　前面已经分享过图表插件，今天在来将下如何使用highcharts来绘制图表。highcharts支持在线定制，你可以选择你所需要的模块，然后点击build就会生成一个js文件链接，右键保存到本地酒可以在项目中使用了。highcharts支持多种图表，如折线、饼状、柱状等等，可以去官网查看(英文、中文)。并且你可以打印图表或者以PNG、JPEG、PDF、SVG格式下载，你可以从官网下载示例。

charts：

　　highcharts提供了很多功能，你可以在图上显示节点数据，或者当鼠标悬上时提示。支持多种形状的节点标签，异步加载数据。

技术分享

技术分享
<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>Highcharts Example</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>        <style type="text/css">${demo.css}        </style>        <script type="text/javascript">$(function () {    $(‘#container‘).highcharts({        credits: {            text: ‘夕阳白雪‘,            href: ‘www.cnblogs.com/xiyangbaixue‘        },        title: {            text: ‘Monthly Average Temperature‘,            x: -20 //center        },        subtitle: {            text: ‘Source: WorldClimate.com‘,            x: -20        },        xAxis: {            categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘,                ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]        },        yAxis: {            title: {                text: ‘Temperature (°C)‘            },            plotLines: [{                value: 0,                width: 1,                color: ‘#808080‘            }]        },        tooltip: {            valueSuffix: ‘°C‘        },        legend: {            layout: ‘vertical‘,            align: ‘right‘,            verticalAlign: ‘middle‘,            borderWidth: 0        },        series: [{            name: ‘Tokyo‘,            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]        }, {            name: ‘New York‘,            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]        }, {            name: ‘Berlin‘,            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]        }, {            name: ‘London‘,            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]        }]    });});        </script>    </head>    <body><script src="../../js/highcharts.js"></script><script src="../../js/modules/exporting.js"></script><div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>    </body></html>
View Code

 技术分享

 

技术分享
<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>Highcharts Example</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>        <style type="text/css">        </style>        <script type="text/javascript">$(function () {    $(‘#container‘).highcharts({        chart: {            type: ‘area‘        },        credits: {            text: ‘夕阳白雪‘,            href: ‘www.cnblogs.com/xiyangbaixue‘        },        title: {            text: ‘US and USSR nuclear stockpiles‘        },        subtitle: {            text: ‘Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">‘ +                ‘thebulletin.metapress.com</a>‘        },        xAxis: {            allowDecimals: false,            labels: {                formatter: function () {                    return this.value; // clean, unformatted number for year                }            }        },        yAxis: {            title: {                text: ‘Nuclear weapon states‘            },            labels: {                formatter: function () {                    return this.value / 1000 + ‘k‘;                }            }        },        tooltip: {            pointFormat: ‘{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}‘        },        plotOptions: {            area: {                pointStart: 1940,                marker: {                    enabled: false,                    symbol: ‘circle‘,                    radius: 2,                    states: {                        hover: {                            enabled: true                        }                    }                }            }        },        series: [{            name: ‘USA‘,            data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]        }, {            name: ‘USSR/Russia‘,            data: [null, null, null, null, null, null, null, null, null, null,                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,                21000, 20000, 19000, 18000, 18000, 17000, 16000]        }]    });});        </script>    </head>    <body><script src="../../js/highcharts.js"></script><script src="../../js/modules/exporting.js"></script><div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>    </body></html>
View Code

技术分享

 

技术分享
<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>Highcharts Example</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>        <style type="text/css">${demo.css}        </style>        <script type="text/javascript">$(function () {    $(‘#container‘).highcharts({        chart: {            type: ‘bar‘        },        title: {            text: ‘Historic World Population by Region‘        },        subtitle: {            text: ‘Source: Wikipedia.org‘        },        xAxis: {            categories: [‘Africa‘, ‘America‘, ‘Asia‘, ‘Europe‘, ‘Oceania‘],            title: {                text: null            }        },        yAxis: {            min: 0,            title: {                text: ‘Population (millions)‘,                align: ‘high‘            },            labels: {                overflow: ‘justify‘            }        },        tooltip: {            valueSuffix: ‘ millions‘        },        plotOptions: {            bar: {                dataLabels: {                    enabled: true                }            }        },        legend: {            layout: ‘vertical‘,            align: ‘right‘,            verticalAlign: ‘top‘,            x: -40,            y: 100,            floating: true,            borderWidth: 1,            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘),            shadow: true        },        credits: {            enabled: false        },        series: [{            name: ‘Year 1800‘,            data: [107, 31, 635, 203, 2]        }, {            name: ‘Year 1900‘,            data: [133, 156, 947, 408, 6]        }, {            name: ‘Year 2008‘,            data: [973, 914, 4054, 732, 34]        }]    });});        </script>    </head>    <body><script src="../../js/highcharts.js"></script><script src="../../js/modules/exporting.js"></script><div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>    </body></html>
View Code

技术分享

技术分享
<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>Highcharts Example</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>        <style type="text/css">${demo.css}        </style>        <script type="text/javascript">$(function () {    $(‘#container‘).highcharts({        chart: {            plotBackgroundColor: null,            plotBorderWidth: 1,//null,            plotShadow: false        },        credits: {            text: ‘夕阳白雪‘,            href: ‘www.cnblogs.com/xiyangbaixue‘        },        title: {            text: ‘Browser market shares at a specific website, 2014‘        },        tooltip: {            pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘        },        plotOptions: {            pie: {                allowPointSelect: true,                cursor: ‘pointer‘,                dataLabels: {                    enabled: true,                    format: ‘<b>{point.name}</b>: {point.percentage:.1f} %‘,                    style: {                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black‘                    }                }            }        },        series: [{            type: ‘pie‘,            name: ‘Browser share‘,            data: [                [‘Firefox‘,   45.0],                [‘IE‘,       26.8],                {                    name: ‘Chrome‘,                    y: 12.8,                    sliced: true,                    selected: true                },                [‘Safari‘,    8.5],                [‘Opera‘,     6.2],                [‘Others‘,   0.7]            ]        }]    });});        </script>    </head>    <body><script src="../../js/highcharts.js"></script><script src="../../js/modules/exporting.js"></script><div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>    </body></html>
View Code

技术分享

 

技术分享
<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>Highcharts Example</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>        <style type="text/css">#container, #sliders {    min-width: 310px;     max-width: 800px;    margin: 0 auto;}#container {    height: 400px; }        </style>        <script type="text/javascript">$(function () {    // Set up the chart    var chart = new Highcharts.Chart({        chart: {            renderTo: ‘container‘,            type: ‘column‘,            margin: 75,            options3d: {                enabled: true,                alpha: 15,                beta: 15,                depth: 50,                viewDistance: 25            }        },        credits: {            text: ‘夕阳白雪‘,            href: ‘www.cnblogs.com/xiyangbaixue‘        },        title: {            text: ‘Chart rotation demo‘        },        subtitle: {            text: ‘Test options by dragging the sliders below‘        },        plotOptions: {            column: {                depth: 25            }        },        series: [{            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        }]    });    function showValues() {        $(‘#R0-value‘).html(chart.options.chart.options3d.alpha);        $(‘#R1-value‘).html(chart.options.chart.options3d.beta);    }    // Activate the sliders    $(‘#R0‘).on(‘change‘, function () {        chart.options.chart.options3d.alpha = this.value;        showValues();        chart.redraw(false);    });    $(‘#R1‘).on(‘change‘, function () {        chart.options.chart.options3d.beta = this.value;        showValues();        chart.redraw(false);    });    showValues();});        </script>    </head>    <body><script src="../../js/highcharts.js"></script><script src="../../js/highcharts-3d.js"></script><script src="../../js/modules/exporting.js"></script><div id="container"></div><div id="sliders">    <table>        <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>        <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>    </table></div>    </body></html>
View Code

技术分享

技术分享
<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>Highcharts Example</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>        <style type="text/css">${demo.css}        </style>        <script type="text/javascript">$(function () {    $(‘#container‘).highcharts({        title: {            text: ‘Combination chart‘        },        credits: {            text: ‘夕阳白雪‘,            href: ‘www.cnblogs.com/xiyangbaixue‘        },        xAxis: {            categories: [‘Apples‘, ‘Oranges‘, ‘Pears‘, ‘Bananas‘, ‘Plums‘]        },        labels: {            items: [{                html: ‘Total fruit consumption‘,                style: {                    left: ‘50px‘,                    top: ‘18px‘,                    color: (Highcharts.theme && Highcharts.theme.textColor) || ‘black‘                }            }]        },        series: [{            type: ‘column‘,            name: ‘Jane‘,            data: [3, 2, 1, 3, 4]        }, {            type: ‘column‘,            name: ‘John‘,            data: [2, 3, 5, 7, 6]        }, {            type: ‘column‘,            name: ‘Joe‘,            data: [4, 3, 3, 9, 0]        }, {            type: ‘spline‘,            name: ‘Average‘,            data: [3, 2.67, 3, 6.33, 3.33],            marker: {                lineWidth: 2,                lineColor: Highcharts.getOptions().colors[3],                fillColor: ‘white‘            }        }, {            type: ‘pie‘,            name: ‘Total consumption‘,            data: [{                name: ‘Jane‘,                y: 13,                color: Highcharts.getOptions().colors[0] // Jane‘s color            }, {                name: ‘John‘,                y: 23,                color: Highcharts.getOptions().colors[1] // John‘s color            }, {                name: ‘Joe‘,                y: 19,                color: Highcharts.getOptions().colors[2] // Joe‘s color            }],            center: [100, 80],            size: 100,            showInLegend: false,            dataLabels: {                enabled: false            }        }]    });});        </script>    </head>    <body><script src="../../js/highcharts.js"></script><script src="../../js/modules/exporting.js"></script><div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>    </body></html>
View Code

 

 

配置选项：

全局配置：

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

 

用highcharts展现你的数据


联系
我们