老版调用方式demo
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>demo</title> <meta content="width=device-width, initial-scale=1" name="viewport"> <meta content="" name="description"> <meta content="" name="author"> </head> <body> <div id="tableContent"></div> <div id="timeTableContent"></div> </div> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://code.highcharts.com.cn/highcharts/4.1.5/highcharts.js"></script> <script type="text/javascript"> // Highcharts JS v4.1.5 (2015-04-13) Highcharts老版调用方式 $('#tableContent').highcharts({ chart: { type: 'column' }, title: { text: '分类统计' }, subtitle: { text: '' //数据来源: WorldClimate.com }, xAxis: { categories: [ '异常','退款','特殊' ], crosshair: true }, yAxis: { min: 0, title: { text: '' } }, tooltip: { // head + 每个 point + footer 拼接成完整的 table headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { borderWidth: 0 }, series: { cursor: 'pointer', events: { click: function (event) { //点击事件 alert( this.name + ' 被点击了 ' + '最近点：' + event.point.category + ' ' + 'Alt 键: ' + event.altKey + ' ' + 'Ctrl 键: ' + event.ctrlKey + ' ' + 'Meta 键（win 键）： ' + event.metaKey + ' ' + 'Shift 键：' + event.shiftKey ); } } } }, series: [{ name: '东京', data: [49.9, 71.5, 106.4] //19个数据，跟categories个数对应 }] }) $('#timeTableContent').highcharts({ chart: { type: 'bar' }, title: { text: '异常时间' }, subtitle: { text: '' //数据来源: Wikipedia.org }, xAxis: { categories: ['今天', '昨天', '前天','30天之前'], //备注，可搞成变量 title: { text: null } }, yAxis: { min: 0, minRange: 1, //柱形图 当数据全为0时，怎么让数据居底部，而不是当中 title: { text: '', align: 'high' }, labels: { overflow: 'justify' } }, tooltip: { valueSuffix: ' 百万' //单位 }, plotOptions: { bar: { dataLabels: { enabled: true, allowOverlap: 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 }, series: [{ name: '2020年', data: [0, 0, 6, 0, 0] }] }) </script> </body> </html>
参考资料：highcharts cdn地址