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

评论

3 楼 xuedong 2012-04-25  

huzhiyong56 写道

我如果就放到我的门户网站上？这种要收费吗？

呵呵，我也不知道

2 楼 huzhiyong56 2012-04-24  

我如果就放到我的门户网站上？这种要收费吗？

1 楼 ganjp 2011-07-05  

商用要钱