HighCharts基本使用实例(入门)

来源：互联网发布：进销存着淘宝编辑：程序博客网时间：2024/05/23 21:22

HighCharts

摘要

HighCharts是目前最为流行的图表插件,应用范围广泛,目前支持曲线图、区域图、3D图、柱状图、饼图、散列图、混合图等，并且还支持一些拓展的特殊图表，如：仪表图、极地图、箱线图、瀑布图等。因工作中用到，所以在这里我只做最基本的配置使用。
官方网站:www.highcharts.com,有兴趣的同学也可以去上面学习更多的内容。

使用

首先需要到下载安装包 - highcharts下载
解压，然后导入两个js文件，然后写代码。举个官网上最简单的例子：

<!doctype html><head>  <meta charset="utf-8" />  <script src="文件所在路径/jquery-1.8.3.js"></script>  <script src="文件所在路径/highcharts.js"></script>  <script>    $(function () {    $('#chart').highcharts({        title: {            text: 'xxx图表'//指定图表标题        },        xAxis: {            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], //指定x轴标签            labels : //定义x轴标签的样式            {                    rotation : -80 ,                    fontStyle : 'italic',                    style: {                        fontSize:'',                        fontFamily: '微软雅黑'                     }            }        },        yAxis: {            title: {                text: 'Temperature (°C)'  //指定y轴标题            }        },        tooltip: {            valueSuffix: '°C'   //指定鼠标移动到某个点上的提示框单位        },        legend: {  //            layout: 'vertical',            align: 'right',            verticalAlign: 'middle',            borderWidth: 0        },        series: [{            name: '温度',            type:'column', //指定图表类型 为柱状图，默认为折线图。            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] //y轴数据        }]    });});  </script></head><body>  <div id="chart" style="min-width:700px;height:400px"></div></body></html>

直接将以上代码粘贴到文件中，修改一下js路径，运行就可以。

还可以支持动态拓展，比如：动态增加y轴，动态修改标题等等。

//获取highcharts对象chart = $('#chart').highcharts();//chart.addAxis({     id: 'precipitation',    title: {        text: '降雨量'    },    lineWidth: 2,    lineColor: '#08F',    labels: {        format: '{value} mm',        style: {            color: '#08F'        }    },    opposite: true //在右边轴显示 ， 用于需要两边轴都需要显示的情况。});chart.addSeries({    name: '降雨量',    type: 'column',    color: '#08F',    yAxis: 'precipitation',    data: precipitationDatas,    tooltip: {        valueSuffix: 'mm'    }});//动态删除y轴。chart.get("precipitation").remove();

这个就是运行起来的图。
OK，就到这里。

0 0