openchart.js的使用

最新推荐文章于 2024-01-09 21:35:47 发布

weixin_33883178

最新推荐文章于 2024-01-09 21:35:47 发布

阅读量302

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：https://my.oschina.net/Seaside20151225/blog/813832

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、引入js

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

2、html前端书写

前端需要写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"));