学习笔记：Highcharts

 （Highcharts 167K； 　　ECharts 354K；　　jqChart 240K），如果用于网络，Highchart最小

 

 

Highcharts　　功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库

http://www.hcharts.cn

http://www.hcharts.cn/product/download.php　　下载

 

 

一个饼图小例子：

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/highcharts/4.2.5/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#pieContainer').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {text: ''},//这里是标题
    tooltip: {
        //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'    //饼上显示文字：第1种
        pointFormat: '{series.name}: <b>{point.percentage}%</b>',        //饼上显示文字：第2种
        //formatter: function() {
            //    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';    //饼上显示文字：第3种
            //}
    },
    credits: {    
        enabled:false    //去掉水印
        //text: 'e.com',
        //href: 'http://www.e.com'
    },
    plotOptions: {        //饼外面拉出的黑线和文字
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,        //设为false，不显示:饼外面拉出的黑线和文字
              color: '#000000',
              connectorColor: '#000000',
              format: '<b>{point.name}</b>: {point.percentage} %'
              //format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }
        }
    },
    series: [{
            type: 'pie',
            name: 'Browser share',
            colors: ['#1ccb6a','#1ccb6a','#1ccb6a','#f7ef1e','#f7ef1e','#f7ef1e','#f7ef1e'],//指定颜色
            data: [
                ['布艺装饰',10],
                ['家电',20],
                ['家具',27],

                ['设计费',5],
                ['管理费',4],
                ['人工费',10],
                ['材料费',24]
            /*
            //这个是被突出的扇形
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                }*/

            ]
        }]
    });
});
</script>
<div id="pieContainer" style="width:600px;height:400px;"></div>

 看API： 

http://www.hcharts.cn/api/index.php#plotOptions　　饼外面显示的文字

http://www.hcharts.cn/api/index.php#series.data　　饼图：传入的数据

 

 

..