1. 程式人生 > >HighCharts靜態柱狀圖實現

HighCharts靜態柱狀圖實現

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>
顯示效果如下: