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. java集合(List,Set,Map)详细总结

    一,集合的由来: 数组是长度是固定的,当添加的元素超过数组的长度时需要对数组重新定义,太麻烦了,java内部给我们提供了集合类,能存储任意对象,长度是可以改变的,随着元素的增加而增加,随着元素的减少而 ...

  2. 1、puppet基础

    Puppet:IT基础设施自动化管理工具 参考文章: https://yq.aliyun.com/articles/120228 http://www.51niux.com/?id=105 http: ...

  3. idea 中提示:Warning:java: 源值1.5已过时, 将在未来所有发行版中删除

    maven的配置文件settings.xml中添加: <profile> <id>jdk-1.8</id> <activation> <activ ...

  4. vs2017 开发.NetCore部署docker

    一.环境 操作系统:windows 10 64bit 开发环境:vs2017 部署环境:docker  — windows 二.准备 安装docker: 见:https://www.cnblogs.c ...

  5. Go package(2) strings 用法

    go version go1.10.3 Go中的字符串用法,可以在 godoc.org 上查看语法和用法. 最简单的语法就是获取字符串中的子串 s := "hello world" ...

  6. easyui datagrid checkbox复选框取消单击选中事件、初始全选全不选等问题解决

    系统业务需要,导入的列表数据默认全部选中,且不可取消选中行.全部店铺优惠券发放过后导入的数据全部清空.如图所示: 一.初始化页面默认全部选中“selectAll”,全部不选中“unselectAll” ...

  7. 华为HCNA乱学Round 6:PVID,TAG,TRUNK

  8. 【神经网络与深度学习】【C/C++】使用blas做矩阵乘法

    使用blas做矩阵乘法   #define min(x,y) (((x) < (y)) ? (x) : (y)) #include <stdio.h> #include <st ...

  9. 论文阅读 | Real-Time Adversarial Attacks

    摘要 以前的对抗攻击关注于静态输入,这些方法对流输入的目标模型并不适用.攻击者只能通过观察过去样本点在剩余样本点中添加扰动. 这篇文章提出了针对于具有流输入的机器学习模型的实时对抗攻击. 1 介绍 在 ...

  10. [python] 进度条效果

    method 1 如果出现多行显示,添加选项 tqdm(iter,ncols=40) """ ncols : int, optional The width of the ...