现在很多网站上都有图表类的展示，highcharts作为做图表的半壁江山（另一个是echarts，我个人觉得highcharts更强大一点，但是企业用highcharts可能要收费，echarts是免费的）,下面就来介绍下highcharts吧。 highcharts的官方文档: http://www.hcharts.cn/,新人学习的话，建议多看实例，对照着实例看Api,了解各个API的作用（记不住也没事啦，每次就再打开文档看看就是了）。 例如，之前学的时候个人觉得比较难的动态实时的图表
html代码这里图表的宽和高可以通过改变html里父级元素改变 复制代码
引入（这个很重要）
复制代码
js(这里复制文档中案例代码并加一些注释)
function activeLastPointToolip(chart) { var points = chart.series[0].points; chart.tooltip.refresh(points[points.length -1]);}$('#container').highcharts({ chart: { //图表的类型设置 type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10, events: { load: function () { // 每一秒更新一个点 var series = this.series[0], chart = this; setInterval(function () { var x = (new Date()).getTime(), // 当前时间 y = Math.random(); //随机y轴的值 series.addPoint([x, y], true, true); //将x，y轴加入数组中 activeLastPointToolip(chart) }, 1000); } } }, title: { text: '动态模拟实时数据' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: { title: { text: '值' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '' + this.series.name + '' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '' + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: '随机数据', data: (function () { // generate an array of random data var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()) }]}, function(c) { activeLastPointToolip(c)});复制代码 以上是一条线的动态数据，在此基础上，下面是两条线的代码，多条线同例；我把加另一条线的代码标记了，有需要的可以借照此代码（当时工作的时候看到四条线的动态数据模拟，花了一些时间做出来的）
function activeLastPointToolip(chart) { var points = chart.series[0].points; chart.tooltip.refresh(points[points.length -1]);}$('#container').highcharts({ chart: { type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10, events: { load: function () { // set up the updating of the chart each second var series = this.series[0], series1= this.series[1], //另一条线 chart = this; setInterval(function () { var x = (new Date()).getTime(), // current time y = Math.random(); y1= Math.random(); //另一条线 series.addPoint([x, y], true, true); series1.addPoint([x, y1], true, true); //另一条线 activeLastPointToolip(chart) }, 1000); } } }, title: { text: '动态模拟实时数据' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: { title: { text: '值' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '' + this.series.name + '' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '' + Highcharts.numberFormat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: '随机数据', data: (function () { var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()), },{ //另一条线数据开始 name: '随机数据', data: (function () { var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: Math.random() }); } return data; }()), } //另一条线数据结束]}, function(c) { activeLastPointToolip(c)});复制代码 其他的图表，一般情况下，案例里都可以找到，以后有时间再分享用ajax请求或者前后端不分离使用假数据模拟图表吧。