码迷,mamicode.com
首页 > 其他好文 > 详细

HighCharts静态柱状图实现

时间:2014-12-30 11:44:04      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:highcharts   js   

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静态柱状图实现

标签:highcharts   js   

原文地址:http://blog.csdn.net/yayun0516/article/details/42263621

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!