highcharts的饼图和趋势图

从今天开始我要在这里写博客，我的技术专业不是很好，但是也想把知道的一点知识和大家分享一下哈~~，也希望能和各位大神共同交流和学习。若我的方法不好，小女子在这里希望各位大神能够批评指导~~

第一篇：highcharts的饼图和趋势图

用这个前端框架的时候，肯定不能缺少的资料是官网，http://www.highcharts.com/

饼图：

1：html的代码中肯定有存放饼图显示的div：

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

2：关键的jQuery代码

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
       pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        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]
            ]
        }]
    });
});

这段代码的关键点就是data数据。这个效果我就不粘贴了，官网上有很好的效果。而我们在实际的开发中，这些数据并不是这样写死在页面中，而是要从后台获取。我一开始非常纠结，这个类型呢应该是什么样的呢，数组也不合适。最后我想到的是无所不能的字符串。可以拼成这种格式的传到前台。所以我的拼字符串的工作就开始了

举个例子：要显示的数据是各浏览器的访问量占比【google：10000，firefox：80000，IE：12000】

我从数据库中取到的是List<BrowserInfo>  BrowserInfo是一个bean，里面存储的browser（String类型）num（String类型）date（String类型） 

//转换成饼图需要的数据格式

public static String getPieData(List<BrowserInfo> > list){
String pieData="[";
for(int i=0;i<list.size();i++){
BrowserInfo   info=list.get(i);
String name=info.getBrowser();
int num=0;
if(null!=info.getNum()){
num=Integer.parseInt(info.getNum());
}
if(pieData.length()==1){
pieData+="[\""+name+"\","+num+"]";
}
else{
pieData+=",[\""+name+"\","+num+"]";
}
}
pieData+="]";
return pieData;
}

ok大功告成。把这个字符串传到前台即可了。

趋势图：

趋势图类似于股票的走势图。趋势图官网是给成这样的：

$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
关键代码依然是这个data。由于数据比较多，它是用这种方式获取的数据，直接打开请求看一下需要的数据格式，是这样的：

[Date.UTC(2010,0,1),0.6976],
[Date.UTC(2010,0,4),0.6932],
[Date.UTC(2010,0,5),0.6962],
[Date.UTC(2010,0,6),0.6944],
[Date.UTC(2010,0,7),0.6985],
[Date.UTC(2010,0,8),0.694],

Date.UTC（年，月，日）是获取到日期的秒数级别，我的处理方式依然是万能的字符串

List<BrowserInfo>从数据库中获取的数据，趋势图的维度是某个对象在某个时间区域内的一个走势，它存储的变量就是日期和数据

public static String getStockData(List<BrowserInfo> list){
String stock="[";
for(int i=0;i<list.size();i++){
BrowserInfo  totalData=list.get(i);
String datetime=totalData.getDateTime();
String year=datetime.split("-")[0];
String month=datetime.split("-")[1];
String day=datetime.split("-")[2];
int num=0;
if(null!=totalData.getNum()){
num=Integer.parseInt(totalData.getNum());
}
if(stock.length()==1){
stock+="[Date.UTC("+year+","+month+","+day+"),"+num+"]";
}
else{
stock+=",[Date.UTC("+year+","+month+","+day+"),"+num+"]";
}
}
stock+="]";
return stock;
}

返回字符串传到前台即可。

这是我转换成highcharts饼图和趋势图的一个方法，不知道还有没有其它方法呢？