github地址:https://github.com/laravel-admin-extensions/chartjs

Installation

composer require laravel-admin-ext/chartjs

php artisan vendor:publish --tag=laravel-admin-chartjs

onfiguration

Open config/admin.php, add configurations that belong to this extension at extensions section.

'extensions' => [

        'chartjs' => [

            // Set to `false` if you want to disable this extension
'enable' => true,
]
]

Usage

Create a view in views directory like resources/views/admin/chartjs.blade.php, and add following codes:

<canvas id="myChart" width="" height=""></canvas>
<script>
$(function () {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [, , , , , ],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth:
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
</script>

Then show it on the page

class ChartjsController extends Controller
{
public function index(Content $content)
{
return $content
->header('Chartjs')
->body(new Box('Bar chart', view('admin.chartjs')));
}
}

拓展:

  折线图和柱状图一起使用

  

<canvas id="myChart1" width="" height=""></canvas>
<script>
$(function () {
var ctx = document.getElementById("myChart1").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
          //数据类型 折线图
type: "line",
data: [, , , , , ],
backgroundColor:'rgba(54, 162, 235, 0.1)',
borderColor:'rgba(255,99,132,1)',
borderWidth:
},{
label: '# of Votes',
          //数据类型 柱状图
type: "bar",
data: [, , , , , ],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'red',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth:
}]
}, options: {
        //显示数值
"animation": {
"duration": ,
"onComplete": function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            //设置字体颜色
ctx.fillStyle = "black";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function(dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - );
});
});
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
</script>

laravel-admin 添加图表 Chartjs的更多相关文章

  1. chart.js 里添加图表的清单:

    chart.js 里添加图表的清单: var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legen ...

  2. grafana 批量添加图表

    利用grafana做监控展示特别方便,而且界面还很有科技感,一般的使用都是自己手动添加图表,或者使用别人提供好的模板. 在一种情况下就比较尴尬了,我有100个实例的内存数据想展示,如果都放在一个tab ...

  3. Ionic 2 中添加图表

    有问题请加入马画藤群:181596813,也强烈欢迎各类建议和需求:Ionic 2 实例开发 今日更新新增章节——Ionic 2 中添加图表: Chart.js是一个在HTML5的<canvas ...

  4. 小白学Python(6)——python-pptx 添加图表

    添加图表 以下代码在新演示文稿中添加单系列柱形图 from pptx import Presentation from pptx.chart.data import CategoryChartData ...

  5. 推荐一个 Laravel admin 后台管理插件

    如何优雅的写代码,我想是每位程序员的心声.自从15年初第一次接触 Laravel 4.2 开始,我就迷上使用 Laravel 框架了.我一直都想找个时间好好写写有关 Laravel 的使用文章,由浅入 ...

  6. diango admin 添加成员报错

    [报错内容]: IntegrityError at /admin/users/userprofile/add/ (1452, 'Cannot add or update a child row: a ...

  7. Admin添加字段

    后台扩展用户信息,注意要到settings里面进行设定,有关联和继承两种方式 首先的关联表可以关联到user表但,主键在user表当中,所以没法直接在user表当中看到相关信息,要是通过继承扩展的话, ...

  8. django admin 添加用户出现外键约束错误

    今天在做mxonline项目时,注册了用户表进admin后,想在后台添加一个用户试试,结果出现了错误,经过一番搜索发现以下两个解决方法,不过我只用了一种 报错信息: IntegrityError: ( ...

  9. 给Django Admin添加验证码和多次登录尝试限制

    Django自带的Admin很好用,但是放到生产环境总还差了点什么= = 看看admin的介绍: Django奉行Python的内置电池哲学.它自带了一系列在Web开发中用于解决常见问题或需求的额外的 ...

随机推荐

  1. 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_3 配置解决中文乱码的过滤器

    输入中文 中文后台接收到 全部乱码 springMvc提供了过滤器 配置过滤器 characterEncodingFilter是首字母小写当做起的名称.当然这里也可以任意起名字.为了对应所以修改类名首 ...

  2. Gradle DSL method not found: 'compile()'

    问题描述: 今天在导入第三方库的时候报错:Gradle DSL method not found: 'compile()' 通过网上查询发现是自己导包路径错误:应该导入app下面的build.grad ...

  3. Python安装远程调试Android需要的扩展脚本

    http://android-scripting.googlecode.com/hg/python/ase/android.py 拷贝到/Python27/Lib/site-packages这个目录下 ...

  4. 反向代理,负载均衡——nginx理论

    nginx是什么? nginx是一个强大的web服务器软件,用于处理高并发的http请求和作为反向代理服务器做负载均衡.具有高性能.轻量级.内存消耗少,强大的负载均衡能力等优势.  nginx架构? ...

  5. 基于Bootstrap 3可预览的HTML5文件上传插件

    前端常用资源地址: http://www.htmleaf.com/ http://www.htmleaf.com/html5/html5muban/201505091801.html 源代码地址 ht ...

  6. 【HANA系列】SAP HANA SQL从给定日期中获取年份

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL从给定日 ...

  7. jvm的学习笔记:二、类的初始化,代码实战(1)

    对于静态字段来说,直接定义该字段的类才会被初始化 System.out.println(MyChild1.str); 输出: myParent1 static block hello myParent ...

  8. Java通过字节分割字符串

    一.题目描述: 一道Java笔试题.将字符串按给定的字节数进行分割,输出分割后的字符串.要求汉字不能进行拆分,如“a中国”不能拆分成“a+中的一半”. 二.解题思路: 首先利用String类的subs ...

  9. 《Linux命令行大全》 笔记记录

    1.Shell是什么 2.(文件目录)导航 3.Linux系统 4.操作文件和目录 5.命令的使用 6.重定向 7.透过shell看世界 扩展 引用 8.高级键盘技巧 9.权限 10.进程 11.环境 ...

  10. AI测试——旅程的终点

    在2019年6月,我产生了一个想法,即人工智能探索测试AIET(Artificial intelligence exploration test),大概用了一周时间来思考怎么把人工智能应用到测试领域, ...