文档章节

openchart.js的使用

0了凡0
 0了凡0
发布于 2016/12/28 16:03
字数 524
阅读 18
收藏 0

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、效果图为

 

© 著作权归作者所有

0了凡0
粉丝 4
博文 78
码字总数 29030
作品 0
昌平
私信 提问

暂无文章

postman批量测试

postman批量调用: 先单个调用,成功了 再save为collection 再点击三角形,点击run 设置1000次,run就可以 见《postman批量测试.docx》

Danni3
34分钟前
8
0
js 对象操作 js 对象和对象赋值 去除关联性 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

当我们在项目需要 复制一个对象到另一个对象并且 被复制的对象不能受复制后的对象的影响。 我先总结下 我们哪些方法可以复制对象 // 直接赋值var obj1 = { a: 1 };var obj2 = obj1;...

xiaogg
35分钟前
7
0
Go微服务全链路跟踪详解

在微服务架构中,调用链是漫长而复杂的,要了解其中的每个环节及其性能,你需要全链路跟踪。 它的原理很简单,你可以在每个请求开始时生成一个唯一的ID,并将其传递到整个调用链。 该ID称为C...

倚天码农
49分钟前
8
0
QML笔记-对QML中信号与槽的基本认识

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq78442761/article/details/90753986 目录 基本概念 演示...

shzwork
56分钟前
5
0
SSH安全加强两步走

从 OpenSSH 6.2 开始已经支持 SSH 多因素认证,本文就来讲讲如何在 OpenSSH 下启用该特性。 OpenSSH 6.2 以后的版本多了一个配置项 AuthenticationMethods。该配置项可以让 OpenSSH 同时指定...

xiangyunyan
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部