1、引入js

OpenCharts是一个js包，包含了一系列js.只需要引入openchartjs即可

<script type="text/javascript" src="../lib/OpenCharts/OpenCharts.js"></script>

2、html前端书写

前端需要写canvas嵌套在div中摆放位置即可。

<div style="left: 0px; top: 0px; position: absolute;">

        <canvas id="canvas1" height="300px" width="500px"></canvas>     </div>     <div style="left: 510px; top: 0px; position: absolute;">         <canvas id="canvas2" height="300px" width="500px"></canvas>     </div>     <div style="left: 1020px; top: 0px; position: absolute;">         <canvas id="canvas3" height="600px" width="500px"></canvas>     </div>     <div style="left:0px;top:330px;position: absolute;">            <canvas id="canvas4" height="400px" width="500px"  ></canvas>     </div>

3、js书写

饼状图在angluarjs中书写

$scope.pieItems = [];     $scope.pieChart = {};     $scope.pieInit = function(){         $scope.pieItems.push(new OpenCharts.Item(10,"未知的性别","#838B8B"));         $scope.pieItems.push(new OpenCharts.Item(206,"男","#0000CD"));         $scope.pieItems.push(new OpenCharts.Item(100,"女","#F00"));         $scope.pieItems.push(new OpenCharts.Item(35,"未说明的性别","#FCF6CF"));         $scope.pieChart = new OpenCharts.Chart.PieChart("canvas1");         $scope.pieChart.strTitle = "客户的性别分析饼状图";         var message = "${itemName}${itemCaption}性人数为${itemData}人";         $scope.pieChart.addItems($scope.pieItems,"客户的");         $scope.pieChart.addEventListener("mousedown",message);         $scope.pieChart.render();     }

在jqueryjs中书写

function init()         {             var items = [],items1 = [],items2 = [],items3 = [];             var style = new OpenCharts.Style();             style.fillStyle = "#F00";             items.push({strCaption : '上海',data : 38.0,itemStyle:'#C0FFFF'});             items.push(new OpenCharts.Item(9.0,"云南",style));             items.push(new OpenCharts.Item(9.0,"内蒙古","#FFC000"));             items.push(new OpenCharts.Item(22,"北京","#FFFF00"));             items.push(new OpenCharts.Item(6,"吉林","#92D050"));             items.push(new OpenCharts.Item(20,"四川","#00B050"));             items.push(new OpenCharts.Item(20,"天津","#00B0F0"));             items.push(new OpenCharts.Item(0,"宁夏","#0070C0"));             items.push(new OpenCharts.Item(6,"安徽","#002060"));             items.push(new OpenCharts.Item(47,"山东","#7030A0"));             items.push(new OpenCharts.Item(7,"山西","#C0504D"));             items.push(new OpenCharts.Item(49,"广东","#9932CC"));             items.push(new OpenCharts.Item(7,"广西","#FBF5E6"));             items.push(new OpenCharts.Item(3,"新疆","#F6F9ED"));             items.push(new OpenCharts.Item(27,"江苏","#EE1289"));             items.push(new OpenCharts.Item(10,"黑龙江","#EEC900"));             items.push(new OpenCharts.Item(0,"江西","#EBECE4"));             items.push(new OpenCharts.Item(0,"河北","#ECF1EF"));             items.push(new OpenCharts.Item(8,"河南","#FCF6CF"));             items.push(new OpenCharts.Item(21,"浙江","#8B6914"));             items.push(new OpenCharts.Item(0,"海南","#FEF6E4"));             items.push(new OpenCharts.Item(8,"湖北","#FCF8DC"));             items.push(new OpenCharts.Item(11,"湖南","#458B74"));             items.push(new OpenCharts.Item(20,"福建","#838B8B"));             items.push(new OpenCharts.Item(0,"西藏","#0000CD"));             items.push(new OpenCharts.Item(3,"贵州","#0000CD"));             items.push(new OpenCharts.Item(39,"辽宁","#FF4040"));             items.push(new OpenCharts.Item(2,"重庆","#CD3333"));             items.push(new OpenCharts.Item(4,"陕西","#8B2323"));             items.push(new OpenCharts.Item(0,"青海","#7FFF00"));             items.push(new OpenCharts.Item(0,"甘肃","#53868B"));             charts = new OpenCharts.Chart.PieChart("canvas");             charts.strTitle = "伦敦奥运会各省市参赛选手";             var message = "${itemName}${itemCaption}省参赛选手人数为${itemData}人";             charts.addItems(items,"伦敦奥运会");             charts.addEventListener("mousedown",message);             //charts.addEventListener("mousemove",message);             charts.render();         }

4、效果图为