`
xuedong
  • 浏览: 296910 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

highcharts 漂亮图表

阅读更多

      highcharts是一个纯js图表工具,浏览器兼容也挺好,支持大部分的图表类型,如直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图等。需要导入三个js包,jquery.min.js,highcharts.js,exporting.js。其中highcharts.js是核心库,需要依赖jquery.min.js,exporting.js是支持打印的,可以不要。另外页面上需要有个div,用于接收图片。

 

 

呵呵,经ganjp 同学提醒,想起来,这个如果商用的话是收费的。

      以下是几个从官网拿下来的效果图和代码

 

1.线状图

var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',//这个是与页面的div 的id对应的,例如<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
         defaultSeriesType: 'line',
         marginRight: 130,
         marginBottom: 25
      },
      title: {
         text: 'Monthly Average Temperature',
         x: -20 //center
      },
      subtitle: {
         text: 'Source: WorldClimate.com',
         x: -20
      },
      xAxis: {
         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
         title: {
            text: 'Temperature (°C)'
         },
         plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
         }]
      },
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               this.x +': '+ this.y +'°C';
         }
      },
      legend: {
         layout: 'vertical',
         align: 'right',
         verticalAlign: 'top',
         x: -10,
         y: 100,
         borderWidth: 0
      },
      series: [{
         name: 'Tokyo',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
      }, {
         name: 'New York',
         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
      }, {
         name: 'Berlin',
         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
      }, {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
      }]
   });
   
   
});

 2.区域图

var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container', 
         defaultSeriesType: 'area'
      },
      title: {
         text: 'US and USSR nuclear stockpiles'
      },
      subtitle: {
         text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
            'thebulletin.metapress.com</a>'
      },
      xAxis: {
         labels: {
            formatter: function() {
               return this.value; // clean, unformatted number for year
            }
         }                     
      },
      yAxis: {
         title: {
            text: 'Nuclear weapon states'
         },
         labels: {
            formatter: function() {
               return this.value / 1000 +'k';
            }
         }
      },
      tooltip: {
         formatter: function() {
            return this.series.name +' produced <b>'+
               Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x;
         }
      },
      plotOptions: {
         area: {
            pointStart: 1940,
            marker: {
               enabled: false,
               symbol: 'circle',
               radius: 2,
               states: {
                  hover: {
                     enabled: true
                  }
               }
            }
         }
      },
      series: [{
         name: 'USA',
         data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640, 
            1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 
            27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 
            26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 
            24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 
            22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 
            10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
      }, {
         name: 'USSR/Russia',
         data: [null, null, null, null, null, null, null , null , null ,null, 
         5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 
         4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 
         15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 
         33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 
         35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 
         21000, 20000, 19000, 18000, 18000, 17000, 16000]
      }]
   });
   
   
});

 

3.柱状图

 

 

/**
 * Visualize an HTML table using Highcharts. The top (horizontal) header 
 * is used for series names, and the left (vertical) header is used 
 * for category names. This function is based on jQuery.
 * @param {Object} table The reference to the HTML table to visualize
 * @param {Object} options Highcharts options
 */
Highcharts.visualize = function(table, options) {
   // the categories
   options.xAxis.categories = [];
   $('tbody th', table).each( function(i) {
      options.xAxis.categories.push(this.innerHTML);
   });
   
   // the data series
   options.series = [];
   $('tr', table).each( function(i) {
      var tr = this;
      $('th, td', tr).each( function(j) {
         if (j > 0) { // skip first column
            if (i == 0) { // get the name and init the series
               options.series[j - 1] = { 
                  name: this.innerHTML,
                  data: []
               };
            } else { // add values
               options.series[j - 1].data.push(parseFloat(this.innerHTML));
            }
         }
      });
   });
   
   var chart = new Highcharts.Chart(options);
}
   
// On document ready, call visualize on the datatable.
$(document).ready(function() {         
   var table = document.getElementById('datatable'),
   options = {
         chart: {
            renderTo: 'container',
            defaultSeriesType: 'column'
         },
         title: {
            text: 'Data extracted from a HTML table in the page'
         },
         xAxis: {
         },
         yAxis: {
            title: {
               text: 'Units'
            }
         },
         tooltip: {
            formatter: function() {
               return '<b>'+ this.series.name +'</b><br/>'+
                  this.y +' '+ this.x.toLowerCase();
            }
         }
      };
   
                     
   Highcharts.visualize(table, options);
});

 

 

 

4.饼状图

 

 

 

var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container',
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: false
      },
      title: {
         text: 'Browser market shares at a specific website, 2010'
      },
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true,
               color: Highcharts.theme.textColor || '#000000',
               connectorColor: Highcharts.theme.textColor || '#000000',
               formatter: function() {
                  return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
               }
            }
         }
      },
       series: [{
         type: 'pie',
         name: 'Browser share',
         data: [
            ['Firefox',   45.0],
            ['IE',       26.8],
            {
               name: 'Chrome',    
               y: 12.8,
               sliced: true,
               selected: true
            },
            ['Safari',    8.5],
            ['Opera',     6.2],
            ['Others',   0.7]
         ]
      }]
   });
});

 

 

 

5.饼图,线图,柱状图在同一界面

 

 

var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container'
      },
      title: {
         text: 'Combination chart'
      },
      xAxis: {
         categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
      },
      tooltip: {
         formatter: function() {
            var s;
            if (this.point.name) { // the pie chart
               s = ''+
                  this.point.name +': '+ this.y +' fruits';
            } else {
               s = ''+
                  this.x  +': '+ this.y;
            }
            return s;
         }
      },
      labels: {
         items: [{
            html: 'Total fruit consumption',
            style: {
               left: '40px',
               top: '8px',
               color: 'black'            
            }
         }]
      },
      series: [{
         type: 'column',
         name: 'Jane',
         data: [3, 2, 1, 3, 4]
      }, {
         type: 'column',
         name: 'John',
         data: [2, 3, 5, 7, 6]
      }, {
         type: 'column',
         name: 'Joe',
         data: [4, 3, 3, 9, 0]
      }, {
         type: 'spline',
         name: 'Average',
         data: [3, 2.67, 3, 6.33, 3.33]
      }, {
         type: 'pie',
         name: 'Total consumption',
         data: [{
            name: 'Jane',
            y: 13,
            color: highchartsOptions.colors[0] // Jane's color
         }, {
            name: 'John',
            y: 23,
            color: highchartsOptions.colors[1] // John's color
         }, {
            name: 'Joe',
            y: 19,
            color: highchartsOptions.colors[2] // Joe's color
         }],
         center: [100, 80],
         size: 100,
         showInLegend: false,
         dataLabels: {
            enabled: false
         }
      }]
   });
   
   
});

 

 

 

highcharts官网:http://www.highcharts.com/

 

欢迎查看本人博客:www.java.hourb.com

0
2
分享到:
评论
3 楼 xuedong 2012-04-25  
huzhiyong56 写道
我如果就放到我的门户网站上?这种要收费吗?

呵呵,我也不知道
2 楼 huzhiyong56 2012-04-24  
我如果就放到我的门户网站上?这种要收费吗?
1 楼 ganjp 2011-07-05  
商用要钱

相关推荐

    Highcharts漂亮大气的图表(纯JS)

    Highcharts是一款广受欢迎的JavaScript库,用于创建美观且交互式的数据可视化图表。它以其灵活性、易用性和丰富的功能集而闻名,使得Web开发者无需深厚的图形设计背景也能制作出专业级别的图表。在本篇文章中,我们...

    HighCharts数据统计图表制作插件

    HighCharts数据统计图表制作插件,数据显示不直观,需要用图表来展示数据的话,HighCharts是一个很好的插件,简单易用,图表漂亮,下载附件,里面有各种图表的例子,相信你不会失望!感谢支持...

    Highcharts2.3.2的zip包图表展示必备

    "可以很漂亮"这一点强调了Highcharts的美观性。Highcharts提供了丰富的自定义选项,可以调整颜色、样式、字体、动画效果等,使得图表不仅具备实用性,也具有良好的视觉吸引力。这对于吸引用户的注意力和提升网站的...

    phighcharts:Highcharts JavaScript 图表库的 PHP 接口

    除了提供漂亮的 OO 界面来创建图表外,它还通过添加诸如“粘滞键”之类的有用工具来扩展功能###Sticky Keys 粘滞键是一种配置选项,允许您始终对某些键使用相同的颜色。 例如,在绘制苹果与橙子的图表时,您可能...

    Django Highcharts制作图表

    在运维工作总很多数据最终的展现方式要用到图表,毕竟用图来展示要比一堆数字更直观些,比如利用率、站点的PV,UV等,大家千万不要觉得看到很多漂亮的图就感觉很难,其实真心不是,因为现在有很多前端的绘图库,你只...

    react-ReactChartkick用一行React代码创建漂亮的JavaScript图表

    - **交互性**:由于底层依赖于像Highcharts、Chart.js这样的成熟图表库,React Chartkick的图表也具有良好的交互性,如缩放、平移、点击事件等。 - **数据驱动**:通过React的状态和属性管理数据,图表会自动根据...

    15款经典图表软件推荐 创建最漂亮的图表

    8. Highcharts:Highcharts是一个纯JavaScript编写的图表库,它提供了在网站或web应用中添加交互式图表的简便方法,支持多种图表类型。 9. Flot:Flot是专为jQuery设计的一个纯JavaScript绘图库,特点是易于使用,...

    漂亮的统计图表,flash统计图表,json统计图表,网页统计图表

    Highcharts是一款广泛应用于网页开发中的JavaScript库,专用于创建高质量、互动式的统计图表。这个库在3.0.1版本中提供了丰富的图表类型和高度定制化的选项,使得开发者能够轻松地将复杂的数据可视化,为用户提供...

    highcharts

    Highcharts是一款功能强大的JavaScript图表库,它被广泛用于创建数据可视化应用,特别是在Web开发中。这个库以其易用性、丰富的图表类型和高度定制性而备受赞誉。在描述中提到,Highcharts支持导出图片和打印功能,...

    漂亮的highchart仪表盘

    Highcharts是一款功能强大且广泛应用的图表库,今天我们来讨论如何使用Highcharts创建一个漂亮的仪表盘。仪表盘是Highcharts中的一种特殊图表类型,用于展示某个指标的当前状态或进度。 标题和描述 从标题和描述中...

    jquery图表插件大全收集

    1. **Highcharts**:这是一个功能强大的图表库,支持多种图表类型,包括动态图表,且具有高度的可定制性。 2. **Chart.js**:轻量级的图表库,适合快速创建简单、美观的图表,特别适合移动设备。 3. **Flot**:...

    非常漂亮的HTML5数据曲线走势图表样式代码

    4. 图表样式:通过CSS和JavaScript,可以定制图表的颜色、线型、背景、标注等视觉效果,使其看起来“非常漂亮”。 在提供的文件中,`index.html`可能是包含图表展示的HTML页面,它可能包含了`&lt;canvas&gt;`元素以及其他...

    蓝色漂亮bootstrap后台界面模板-ui界面 cms系统 admin 管理 后台系统 登录 图表 全屏 响应式 多彩 oa

    "图表"部分则可能使用了如Chart.js或Highcharts等图表库,这些图表库能够生成各种类型的统计图,如柱状图、饼图、线图等,帮助管理员直观地理解数据和系统状态。 "全屏"功能则意味着这个模板可以扩展到全屏模式,...

    pywws-highcharts:Highcharts 渲染 pywws 数据

    在 highcharts 中呈现的 pywws 图表 这是我在用来生成天气图的代码。 点击查看截图,或为我的活生生的例子。 气象站插入 Linux 机器,该机器运行以将数据从 USB 线上拉出并通过一系列模板运行。 我只是定义了几个...

    Chartkick用一行Ruby代码创建漂亮的JavaScript图表

    通过集成流行的JavaScript图表库,如Highcharts、Google Charts和Plotly,Chartkick提供了丰富的图表类型,包括柱状图、饼图、线形图等,以满足各种数据展示需求。 在JavaScript开发中,数据可视化是一个关键的领域...

    JavaScript图表库

    OpenFlashChart是用于生成Flash图表的组件,它提供了丰富的图表类型以及漂亮的展示效果。它适合在需要Flash支持的场合使用。 3. JFreeChart JFreeChart是一个主要用来生成各种类型图表的Java图表库,包括饼图、柱状...

    引用:highChart控件不错,挺漂亮

    标题中的“highChart控件”指的是Highcharts,一个流行的JavaScript图表库,用于在网页上创建交互式的图表。Highcharts以其丰富的图表类型、良好的性能和易用性受到开发者的青睐。它支持各种图表类型,包括折线图、...

    .NET jqery 整合的图表实例

    "里面还有一个漂亮的拾色器"提示我们,这个图表实例可能包含了色彩选择工具,使得用户可以方便地为图表元素挑选合适的颜色。这对于提升用户体验和视觉效果非常重要,尤其是在制作多色图表或需要用户自定义颜色的场景...

    JS--HighCharts

    该模块通过创建典型的perl对象并设置适当的属性,简化了获得漂亮图表的过程。 用法 use JS::HighCharts my $hc = JS::HighCharts -&gt; new( lib_src =&gt; [ ], # parameters ); 设置对象后,您将通过调用方法来...

Global site tag (gtag.js) - Google Analytics