学习笔记：jqchart

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

 

 

jqchart 国外的一个图表库　　　　挺漂亮的

http://www.jqchart.com　　官网

 

一个饼图的小例子：

<link rel="stylesheet" type="text/css" href="http://www.jqchart.com/jquery/chart/Content/jquery.jqChart.css" />
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.jqchart.com/jquery/chart/Scripts/jquery.jqChart.min.js" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="http://www.jqchart.com//jquery/chart/Scripts/excanvas.js"></script><![endif]-->
<script lang="javascript" type="text/javascript">
  $(document).ready(function () {

    var background = {
        type: 'linearGradient',
        x0: 0,
        y0: 0,
        x1: 0,
        y1: 1,
        colorStops: [{ offset: 0, color: '#d2e6c9' },
                 { offset: 1, color: 'white' }]
    };

    $('#jqChart').jqChart({
        title: { text: 'Doughnut Chart' },
        legend: { title: 'Countries' },
        border: { strokeStyle: '#6ba851' },
        background: background,
        animation: { duration: 1 },
        shadows: {
          enabled: true
        },
        series: [
          {
            type: 'doughnut',
            innerExtent: 0.5,
            outerExtent: 1.0,
            fillStyles: ['#418CF0','#FCB441','#E0400A','#056492','#BFBFBF','#1A3B69','#FFE382'],
            labels: {
                stringFormat: '%.1f%%',
                valueType: 'percentage',
                font: '15px sans-serif',
                fillStyle: 'white'
            },
            data: [
                ['家具',27],
                ['家电',20],
                ['布艺装饰',10],

                ['材料费',24],
                ['人工费',10],
                ['管理费',4],
                ['设计费',5]
            ]
          }
        ]
    });
  });
</script>
<div id="jqChart" style="width:500px;height:300px;"></div>

 

 

..