angulajs中引用chart.js做报表,修改线条样式

目前还有个问题,在手机上看,当折线y轴值超过1000,会有点问题

1.下载chart js,可以用bower 命令下载

http://www.chartjs.org/docs/#line-chart-example-usage

2.html页面代码

<canvas id="leaderline" class="chart chart-line" data="data"
                        labels="labels" legend="true" series="series" colours="linecolours">
                </canvas>

3.Js数据组装(核心有个地方可以改线的样式,便于大家参考)

var funleaderbarDrawByLeader=function(pData)
    {
        $scope.overTimeLeaders=pData;
         //折线
         $scope.linecolours =[
         {
         label: "My First dataset",
         fillColor: "rgba(70,191,189,0.2)",
         strokeColor: "rgba(70,191,189,1)",
         pointColor: "rgba(70,191,189,1)",
         pointStrokeColor: "#fff",
         pointHighlightFill: "#fff",
         pointHighlightStroke: "rgba(70,191,189,1)"
         },
         {
         label: "My Second dataset",
         fillColor: "rgba(253,180,92,0.2)",
         strokeColor: "rgba(253,180,92,1)",
         pointColor: "rgba(253,180,92,1)",
         pointStrokeColor: "#fff",
         pointHighlightFill: "#fff",
         pointHighlightStroke: "rgba(253,180,92,1)"
         },
             {
                 label: "My Second dataset",
                 fillColor: "rgba(128,206,69,0.2)",
                 strokeColor: "rgba(128,206,69,1)",
                 pointColor: "rgba(128,206,69,1)",
                 pointStrokeColor: "#fff",
                 pointHighlightFill: "#fff",
                 pointHighlightStroke: "rgba(128,206,69,1)"
             }
         ];
         $scope.labels = [];
         $scope.series=[];
         $scope.data = [];
         $scope.lineDeptName="";//总加班工时提示
         //{"OvertimeDate":"2014-10-01--2014-12-31","DeptID":"100145","DeptName":"信用卡室","LineID":"990283",
         // "LineName":"数据中心","OvertimeHours":"1517.1000000000001","AvgHoursByDept":"1471.01","AvgHoursByEmp":"114.33"}
         var lineDeptNameValue=0;
         var OvertimeHoursData = [];
         var AvgHoursData = [];
         var AvgHoursByEmpData = [];
         for(var i= 0;i<pData.length;i++)
         {
         $scope.labels.push(pData[i].DeptName);
         OvertimeHoursData.push(parseInt(pData[i].OvertimeHours));
         AvgHoursData.push(parseInt(pData[i].AvgHoursByDept));
         AvgHoursByEmpData.push(parseInt(pData[i].AvgHoursByEmp));
         lineDeptNameValue+=Number(pData[i].OvertimeHours);
        if(i==0)
         {
         $scope.lineDeptName=pData[i].LineName;
     /*    $scope.lineDeptName=pData[i].LineName;
         $scope.series.push(pData[i].LineName+‘加班(小时)‘);
         $scope.series.push(pData[i].LineName+‘平均加班(小时)‘)*/;
         }
         }
        $scope.series.push(‘室组总计(小时)‘);
        $scope.series.push(‘室组平均(小时)‘);
        $scope.series.push(‘个人平均(小时)‘);

         $scope.data.push(OvertimeHoursData);
         $scope.data.push(AvgHoursData);
         $scope.data.push(AvgHoursByEmpData);

         $scope.lineDeptName+=‘加班总工时:‘+lineDeptNameValue+‘小时‘;

    }

时间: 2024-10-10 12:45:33

angulajs中引用chart.js做报表,修改线条样式的相关文章

Salesforce Lightning组件中使用Chart.JS实现数据可视化

之前尝试过Google Chart来实现数据可视化(可以查看我之前的博客Google Chart 之 Area Chart案例),但是很遗憾,Google Chart是无法集成到Salesforce Lightning中的,理由嘛,Google JavaScript会跟Google通信,而且具有脚本的外部引用,但是Sales force的安全策略是不允许这样做的,据我所知,到目前为止是没有解决方法的,所以我们来学习下Chart.JS,这个开源的第三方JS库提供了交互式可视化组件,关键是,它是可以

使用ASP.NET中的Chart.js在ASP.NETVisual数据中使用Chart.js的可视化数据

Download Chart.js你可以Chart.js从这封信中:https://github.com/chartjs/Chart.js/releases 使用VisualStudio创建新的ASP.NET项目并复制Chart.js在上一步中下载到root项目. 创建一个名为"Home.aspx"并添加如下代码行: 藏   复制码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehi

用php脚本给html中引用的js和css路径打上版本

比如 <link rel="stylesheet" type="text/css" href="./css/globel.css"> <script src="./js/config.js"></script> 中的href和src加上版本 <link rel="stylesheet" type="text/css" href="./c

js获取、修改CSS样式

CSS样式分为三种,行内样式.内部样式.外部样式. 一.element.style.stylename 创建.获取.修改       行内样式   console.log(document.getElementById("testcss0").style.backgroundColor);//"" document.getElementById("testcss0").style.backgroundColor = "black&quo

js script中引用其他script

在需要引用目标js中引用其他js依赖项 可以使用这个方法直接在js顶部加入这一行即可 document.write("<script type='text/javascript' src='t2.js'></script"); 并且如果有多个js中引用同一个js文件 也不需要多次加载

Chart.js在Laravel项目中的应用

本文为转载,原文:Chart.js在Laravel项目中的应用 介绍 Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等, 本文将介绍如何在laravel项目中使用chart.js 安装 可以通过以下命令在 npm 或 bower 中来安装chart.js. npm install chart.js --save bower install chart.js --save 可以在你的项目中使用 CDN link. h

Chart.js Y轴数据以百分比展示

新手一枚,解决的问题喜欢记录,也许正好有人在网上迷茫的百度着.-0- 最近使用Chart.js做折线图的报表展示,直接显示整数啥的很好弄毕竟例子直接在哪里可以用,百分比就没办法了.百度慢慢汲取营养,虽然总是几篇文章复制粘贴,但还有有收获,然后自己捣鼓半天总算是弄出来了... 首先参考: http://www.chartjs.org/docs/latest/ 引用js,学习基本等等... 然后数据什么的就不说了直说怎么展示, 在配置文件中yAxes>ticks>callback 中设置你需要在Y

Html5之高级-7 HTML5 Chart.js(概述、入门、使用)

一.Chart.js 概述 Chart.js 简介 - Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库 - 官方地址: http://www.chartjs.org/ Chart.js 特点 - 基于 HTML 5 - Chart.js 基于 HTML5 canvas技术,支持所有现代浏览器,并且针对IE7/8提供了降级替代方案 - 简单.灵活 - Chart.js 不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法 Chart.js

chart.js使用常见问题

Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 在使用过程中新手可能会遇到很多问题导致图标无法显示.下面我们来看一下在使用过程中可能会遇到的问题. 刚开始用chart.js的新手可能最先使用的就是chart.js的中文文档,根据中文文档所写的操作步骤完成操作. 首先,下载chart.js文件,通常我们从github下载. 初次使用,我们通常会直接点击图片右下角的clone or download直接下载zip文件,然后在解压后的文件中找到chart.js文件,之后引