首页 > 代码库 > 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>
显示效果如下:

技术分享

HighCharts静态柱状图实现