HighCharts靜態柱狀圖實現
阿新 • • 發佈:2019-02-06
Highcharts:功能強大、開源、美觀、圖表豐富、相容絕大多數瀏覽器的純js圖表庫
Highcharts是一款純javascript編寫的圖表庫,能夠很簡單便捷的在Web網站或Web應用中新增互動性的圖表,Highcharts目前支援直線圖、曲線圖、面積圖、柱狀圖、餅圖、散點圖等多達18種不同型別的圖表,可以滿足你對Web圖表的任何需求 !
例項程式碼如下:
顯示效果如下:<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script> <script> $(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'My first Highcharts chart' }, xAxis: { categories: ['my', 'first', 'chart'] }, yAxis: { title: { text: 'something' } }, series: [{ name: 'Jane', data: [1, 22, 4] }, { name: 'John', data: [5, 7, 3] }, { name: 'Jack', data: [5, 7, 3] }] }); });<span style="white-space:pre"> </span> </script> </head> <body>