Official
https://www.chartjs.org/docs/latest/charts/mixed.html
HTML
1 2 3 |
<script type="text/javascript" charset="utf8" src="{{asset("plugins/Chart.min.js")}}"></script> <canvas id="myChart" width="400" height="200"></canvas> |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
var options = { responsive: true, legend: { position: 'bottom', }, title: { display: true, text: '遵從率' }, scales: { yAxes: [{ ticks: { beginAtZero: true, callback: function(value, index, values) { return value + '%'; } } }] } } var ctx = null; var chart = null; $(document).ready(function(){ $('.datetimepicker').datetimepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm:ss', changeYear: true, changeMonth: true }); $('.report-button').removeClass('active'); $('#bt_bar').addClass('active'); ctx = document.getElementById('myChart'); chart = new Chart(ctx, { type: 'bar', data: { datasets: [ { label: '遵從率', data: [], backgroundColor: 'rgba(60, 141, 188, 0.8)' }, { label: '遵從率標準值', data: [], type: 'line', backgroundColor: 'transparent', borderColor: 'rgba(255, 174, 201, 1)' } ], labels: ['January', 'February', 'March', 'April'] }, options: options }); $('#search').on('click', function(e) { report_data(); }); report_data(); }); function report_data(callback) { var params = { from: $('#from').val(), to: $('#to').val(), } $.get('/HAI/admin/dry_report/bar/data', params, function(res) { //console.log(data); //return; if (typeof res.status == 'undefined') { alert(res); return; } else if (res.status == 'fail') { alert(res.message); return; } if (typeof callback == 'function') { callback.call(null, res.data); } var data = res.data; chart.data.labels = data.labels; chart.data.datasets[0].data = data.data; chart.data.datasets[1].data = data.std; chart.update(); }); } function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } |
PHP for Ajax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
public function bar_chart_data(Request $req){ $from = $req->input('from'); $to = $req->input('to'); $options = [ 'from' => $from, 'to' => $to ]; $data = DryReportM::bar_chart_data($options); $data = $this->format_bar_chart_data($data); //logg($data); return $this->success_response($data); } private function format_bar_chart_data($data){ $values = array( 'labels' => array(), 'data' => array(), 'std' => array(), ); $dry_wash_std = ConfigM::value('dry_wash_std'); //logg($config); foreach ($data as $key => $item) { if(in_array($item->user, User::ADMINS) == true){ continue; } array_push($values['labels'], $item->name); array_push($values['std'], $dry_wash_std); $blood = $item->blood_count; $violations = $item->violation_count; if($blood == 0){ $p = 0; }else{ $p = (1 - ($violations / $blood)) * 100; $p = round($p, 1); } array_push($values['data'], (int)$p); } return $values; } |