highcharts-javascript图表库

      最近准备做一些曲线，饼状图的显示。以前做.net的时候，最笨的法子是自己来写图片，先做出每个点，然后之间连成线，做出的效果没有使用第三方控件美观。也使用过am.Charts.dll这个第三方控件，感觉效果不错。使用也挺方便。
但是最近有个同事说，要用svg来实现一些曲线，饼状图的显示功能。个人认为，svg在ie上使用还要借助svgview这个插件，而且如果svg文件缺少xmlns="http://www.w3.org/2000/svg"这段话，在firefox上也不能显示。最大的原因还是因为ie上需要安装插件，所以感觉用户友好性会不好。
      先说下svg，如svg.php这个文件返回的是一个svg的文件。svg文件从xml文件中读取数据。画面显示使用html的embed标签，就可将svg文件显示出来。svg中显示中文，只要指定字体就可以了，svg简单说明如下：

<embed src="svg.php" height="300" width="300" type="image/svg+xml"
 pluginspage="http://www.adobe.com/svg/viewer/install/"
 style="border: 1px solid black; padding:5px;"/>

 

在svg的文件中，也可以使用css：

<style type="text/css">
.background { stroke-width: 0; fill:url(#BackGradient); }
</style>

 

      参考其他项目对图表的处理方法，发现了highcharts这个javascript图表库。显示效果和第三方控件通过flash显示一样。通过highcharts + jquery显示曲线，饼状图。highcharts的api，demo，代码的规范写法，可以看它的官网。现列举几个例子（代码写法可能不规范）：

柱状图：

<div id="bc_a" class="bitemcon" style="width:755px; height: 300px;">
    <div class="swftit"></div>
<script type="text/javascript">
//<![CDATA[
jQuery(function() {
    // 1. Define JSON options
    var options = {
            chart: {"defaultSeriesType":"column","renderTo":"bc_a"},
            title: {"text":"测试柱状图"},
            legend: {"enabled":false},
            xAxis: {"categories":[<?php echo $date;?>],"labels":{"rotation":-90,"align":"right"}},
            yAxis: {"min":0,"title":""},//可以用"title":{text: '曲线'}，增加对y轴的文字说明
            tooltip: {"enabled":true},
            credits: {"enabled":false},
            plotOptions: {"areaspline":{"fillOpacity":0.5}},
            series: [{"name":"test1","data":[<?php echo $data;?>]},{"name":"对比柱状图","data":[10000,7000,7000,10000]}],
             subtitle: {}
    };
    // 2. Add callbacks (non-JSON compliant)
    options.tooltip.formatter = function() { 
        return '<b>'+ this.series.name +'</b>'+ this.x +': '+ this.y;
    }
    // 3. Build the chart
    var chart = new Highcharts.Chart(options);
});

//]]>
</script>
</div>

 

曲线：

<div style="height:200px; width: 760px;">
<script type="text/javascript">
//<![CDATA[
jQuery(function() {
    // 1. Define JSON options
    var options = {
            chart: {"defaultSeriesType":"line","height":240,"width":760,"renderTo":"line_chart"},
             title: {"text":""},
             legend: {"enabled":false},
             xAxis: {"categories":["11-18","11-19","11-20","11-21","11-22","11-23","11-24","11-25"],"labels":{"rotation":-90,"align":"right"}},
             yAxis: {"min":0,"title":""},
            tooltip:  {"enabled":true},
             credits: {"enabled":false},
             plotOptions: {"areaspline":{"fillOpacity":0.5}},
             series: [{"name":"曲线值1:","data":[9,8,5,9,10,10,8,1]},{"name":"曲线值2:","data":[1,2,3,4,10,6,8,5]}],
             subtitle: {}
        };
    // 2. Add callbacks (non-JSON compliant)
    options.tooltip.formatter = function() { 
        return '<b>'+ this.series.name +'</b>'+ this.x +': '+ this.y;
    } 
    // 3. Build the chart
    var chart = new Highcharts.Chart(options);
});
//]]>
</script>
<div id="line_chart" style="height: 300px, width:615px"></div>
</div>

 

饼状图（在该图表中，若数值所占总体比例很小，在图表中好像不显示了，可能是四舍五入的原因吧）：

<div class="piecleft" id="chart" style="height:350px; width: 350px;">
</div>
<script type="text/javascript" charset="utf-8">
var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'chart'
      },
      title: {
         text: '版本分布分析'
      },
      plotArea: {
         shadow: null,
         borderWidth: null,
         backgroundColor: null
      },
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
                         Highcharts.numberFormat(this.y, 0, ',') +' 个)';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true,
               formatter: function() {
                  if (this.percentage > 4) return this.point.name;
               },
               color: 'white',
               style: {
                  font: '13px Trebuchet MS, Verdana, sans-serif'
               }
            }
         }
      },
      legend: {
         backgroundColor: '#FFFFFF',
         x: 0,
         y: -30
      },
      credits: {
          enabled: false
      },
       series: [{
         type: 'pie',
         name: 'Browser share',
         data: [
            ['1.1',3617],
            ['1.2.1',3436],
            ['1.0',416],
            ['1.3',2],
            ['1.2',1],
            ['新增对比',5000] 
         ]
      }]
   });
});
</script>

 

曲线图+ajax（该代码是官网的代码）：

<div id="container" style="width:755px; height: 300px;"></div>
<script type='text/javascript'>  
//<![CDATA[
    $(document).ready(function() {
    chart_ajax = new Highcharts.Chart({
        credits: {"enabled":false},//不显示右下角网址链接
        legend: {"enabled":false},//
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Live random data'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: 'Random data',
            data: []
        }]
    });        
});
    function requestData() {
        $.ajax({
            url: './ajax.php',
            success: function(point) {
                var series = chart_ajax.series[0],
                    shift = series.data.length > 20; // shift if the series is longer than 20
                // add the point
                chart_ajax.series[0].addPoint(point, true, shift);
                // call it again after one second
                setTimeout(requestData, 5000);    
            },
            cache: false
    });
}
//]]>   
</script>

 

 其中，ajax.php代码是：

 

<?php
// Set the JSON header
header("Content-type: text/json");

// The x value is the current JavaScript time, which is the Unix time multiplied by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(0, 100);

// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>

 

      从以上几个例子的代码可以发现，它的数据是放在“series”中，series的name属性表示的所表示图形的名称，series的data属性表示该图形的数据，data数据使用的是json格式数据。整个配置的关键部分在于series,chart,xAxis,yAxis，series接受的数据格式为json Array：[{},{},{}]。

 

补充部分熟悉说明：

chart: {"defaultSeriesType":"line","height":410,"width":760,"marginBottom":110,"renderTo":"line_chart"}
// renderTo：放置图表的容器
// defaultSeriesType：图表类型line, spline, area, areaspline, column, bar, pie , scatter

legend: {"enabled":true,backgroundColor: '#FFFFFF',x: 10,y: -30,"verticalAlign":"bottom"}
//enabled:是否显示图例区域
//backgroundColor:图例的背景色
//x和y:图例的坐标，可调整其画面布局位置
//verticalAlign:图例位于图形的底部（bottom）还是上面（top）

credits: {"enabled":false}//是否显示右下角highchart的网址链接

title：{"text": "XX曲线"}//图形的标题

subtitle: {}//图形的子标题

tooltip:{"enabled":true}//当鼠标在曲线上时，是否显示信息

 

以上代码的编写，引用了：

<link href="css/jquery-ui-1.8.4.custom.css" media="screen" rel="stylesheet" type="text/css" />
<script src="javascripts/chart.js" type="text/javascript"></script>
<script src="javascripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="javascripts/highcharts.js" type="text/javascript"></script>
<script src="javascripts/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script> 

     

      highcharts网址：http://www.highcharts.com/，下载最新版本，且下载包中有很完整的例子。对开发有很大的帮助。

      以上就是我使用highcharts这个javascript图表库总结的一些，若有错误，还请指出。不知道怎么上传文件，就不传这些文件了。（2010年11月27日）