laravel-admin 添加图表 Chartjs
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的更多相关文章
- chart.js 里添加图表的清单:
chart.js 里添加图表的清单: var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legen ...
- grafana 批量添加图表
利用grafana做监控展示特别方便,而且界面还很有科技感,一般的使用都是自己手动添加图表,或者使用别人提供好的模板. 在一种情况下就比较尴尬了,我有100个实例的内存数据想展示,如果都放在一个tab ...
- Ionic 2 中添加图表
有问题请加入马画藤群:181596813,也强烈欢迎各类建议和需求:Ionic 2 实例开发 今日更新新增章节——Ionic 2 中添加图表: Chart.js是一个在HTML5的<canvas ...
- 小白学Python(6)——python-pptx 添加图表
添加图表 以下代码在新演示文稿中添加单系列柱形图 from pptx import Presentation from pptx.chart.data import CategoryChartData ...
- 推荐一个 Laravel admin 后台管理插件
如何优雅的写代码,我想是每位程序员的心声.自从15年初第一次接触 Laravel 4.2 开始,我就迷上使用 Laravel 框架了.我一直都想找个时间好好写写有关 Laravel 的使用文章,由浅入 ...
- diango admin 添加成员报错
[报错内容]: IntegrityError at /admin/users/userprofile/add/ (1452, 'Cannot add or update a child row: a ...
- Admin添加字段
后台扩展用户信息,注意要到settings里面进行设定,有关联和继承两种方式 首先的关联表可以关联到user表但,主键在user表当中,所以没法直接在user表当中看到相关信息,要是通过继承扩展的话, ...
- django admin 添加用户出现外键约束错误
今天在做mxonline项目时,注册了用户表进admin后,想在后台添加一个用户试试,结果出现了错误,经过一番搜索发现以下两个解决方法,不过我只用了一种 报错信息: IntegrityError: ( ...
- 给Django Admin添加验证码和多次登录尝试限制
Django自带的Admin很好用,但是放到生产环境总还差了点什么= = 看看admin的介绍: Django奉行Python的内置电池哲学.它自带了一系列在Web开发中用于解决常见问题或需求的额外的 ...
随机推荐
- java集合(List,Set,Map)详细总结
一,集合的由来: 数组是长度是固定的,当添加的元素超过数组的长度时需要对数组重新定义,太麻烦了,java内部给我们提供了集合类,能存储任意对象,长度是可以改变的,随着元素的增加而增加,随着元素的减少而 ...
- 1、puppet基础
Puppet:IT基础设施自动化管理工具 参考文章: https://yq.aliyun.com/articles/120228 http://www.51niux.com/?id=105 http: ...
- idea 中提示:Warning:java: 源值1.5已过时, 将在未来所有发行版中删除
maven的配置文件settings.xml中添加: <profile> <id>jdk-1.8</id> <activation> <activ ...
- vs2017 开发.NetCore部署docker
一.环境 操作系统:windows 10 64bit 开发环境:vs2017 部署环境:docker — windows 二.准备 安装docker: 见:https://www.cnblogs.c ...
- Go package(2) strings 用法
go version go1.10.3 Go中的字符串用法,可以在 godoc.org 上查看语法和用法. 最简单的语法就是获取字符串中的子串 s := "hello world" ...
- easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决
系统业务需要,导入的列表数据默认全部选中,且不可取消选中行.全部店铺优惠券发放过后导入的数据全部清空.如图所示: 一.初始化页面默认全部选中“selectAll”,全部不选中“unselectAll” ...
- 华为HCNA乱学Round 6:PVID,TAG,TRUNK
- 【神经网络与深度学习】【C/C++】使用blas做矩阵乘法
使用blas做矩阵乘法 #define min(x,y) (((x) < (y)) ? (x) : (y)) #include <stdio.h> #include <st ...
- 论文阅读 | Real-Time Adversarial Attacks
摘要 以前的对抗攻击关注于静态输入,这些方法对流输入的目标模型并不适用.攻击者只能通过观察过去样本点在剩余样本点中添加扰动. 这篇文章提出了针对于具有流输入的机器学习模型的实时对抗攻击. 1 介绍 在 ...
- [python] 进度条效果
method 1 如果出现多行显示,添加选项 tqdm(iter,ncols=40) """ ncols : int, optional The width of the ...