自定义图表
<h1>自定义图表</h1>
<p><code>dcat-admin 1.5</code>已经移除了所有的图表组件，如果要在页面中加入图表组件，可以参考下面的流程</p>
<p>用<code>chartjs</code>举例，首先要下载<a href="http://chartjs.org/">chartjs</a>，放到public目录下面，比如放在<code>public/vendor/chartjs</code>目录</p>
<p>然后在<code>app/Admin/bootstrap.php</code>引入组件：</p>
<pre><code class="language-php">use Dcat\Admin\Facades\Admin;
Admin::js('/vendor/chartjs/dist/Chart.min.js');
</code></pre>
<p>新建视图文件 <code>resources/views/admin/charts/bar.blade.php</code></p>
<pre><code class="language-php">&lt;canvas id=&quot;myChart&quot; width=&quot;400&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;
&lt;script&gt;
$(function () {
var ctx = document.getElementById(&quot;myChart&quot;).getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [&quot;Red&quot;, &quot;Blue&quot;, &quot;Yellow&quot;, &quot;Green&quot;, &quot;Purple&quot;, &quot;Orange&quot;],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
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: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
&lt;/script&gt;</code></pre>
<p>然后就可以在页面的任何地方引入这个图表视图了：</p>
<pre><code class="language-php">public function index()
{
return Admin::content(function (Content $content) {
$content-&gt;header('chart');
$content-&gt;description('.....');
$content-&gt;body(view('admin.charts.bar'));
});
}
</code></pre>
<p>按照上面的方式可以引入任意图表库，多图表页面的布局，参考<a href="layout.md">视图布局</a></p>