laravelÏîÄ¿ÖÐÔõôÌí¼ÓÖù״ͼ
laravelÊÇÒ»¸öÆÕ±éʹÓõÄphp webÓ¦ÓóÌÐò¿ª·¢¿ò¼Ü£¬ËüÌṩÁ˸»ºñµÄ¹¤¾ßºÍ¹¦Ð§Ê¹µÃ¿ª·¢Õß¿ÉÒÔ½¨Éè¸ßЧ£¬¿ÉÀ©Õ¹µÄwebÓ¦ÓóÌÐò¡£ÆäÖаüÀ¨Êý¾Ý¿ÉÊÓ»¯¹¤¾ß£¬¿ÉÒÔͨ¹ýlaravelʵÏÖÖù״ͼ¡£
Êý¾Ý¿ÉÊÓ»¯ÊÇÒ»ÖÖºÜÊÇÖ÷ÒªµÄÊÖÒÕ£¬ËüʹµÃÊý¾ÝÔ½·¢Ò×ÓÚÃ÷È·ºÍÆÊÎö¡£Öù״ͼÊÇÊý¾Ý¿ÉÊÓ»¯ÖÐ×î³£¼ûµÄ·½·¨Ö®Ò»¡£LaravelÌṩÁ˶àÖÖÒªÁìÒÔʵÏÖÖù״ͼ¡£ÏÂÃæ¾Í¼òÆÓÏÈÈÝÒ»ÏÂÆäÖÐÁ½ÖÖÒªÁ죺
µÚÒ»ÖÖ·½·¨£ºÊ¹ÓÃLaravel ChartsÀ©Õ¹°ü
Laravel ChartsÊÇÒ»¸ö»ùÓÚChart.js¿â¹¹½¨µÄLaravelÀ©Õ¹°ü¡£Ëü¿ÉÒÔºÜÀû±ãµØÌìÉú²î±ðÀàÐ͵Äͼ±í£¬°üÀ¨Öù״ͼ¡¢ÕÛÏßͼ¡¢±ýͼµÈ¡£ËüÖ§³Ö¸»ºñµÄÉèÖÃÑ¡ÏÈçÑÕÉ«¡¢±êÇ©¡¢×ø±êÖáµÈ£¬¿ÉÒÔ¶Ôͼ±í¾ÙÐж¨ÖƺÍÃÀ»¯¡£
ʹÓÃLaravel ChartsºÜÊǼòÆÓ£¬Ö»ÐèÔÚcomposer.jsonÎļþÖÐÌí¼ÓÒÀÀµ£º
¡°consoletvs/charts¡±: ¡°~6.0¡±,
µÇ¼ºó¸´ÖÆ
È»ºóÔÚÖÕ¶ËÖÐÔËÐÐcomposer installÍê³É°üµÄ×°Öá£×°ÖÃÍê³ÉÖ®ºó£¬¿ÉÒÔͨ¹ýÒÔÏ´úÂëÀ´ÌìÉúÖù״ͼ£º
use ConsoleTVs\Charts\Facades\Charts; $chart = Charts::create('bar', 'highcharts') ->title('Monthly Sales') ->elementLabel('Total Sales') ->labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']) ->values([50, 70, 80, 90, 100, 120]); return view('sales', ['chart' => $chart]);
µÇ¼ºó¸´ÖÆ
Õâ¶Î´úÂ뽫ÌìÉúÒ»¸öÖù״ͼ£¬ÎÊÌâΪ¡°Monthly Sales¡±£¬ºáÖáΪÔ·ݣ¬×ÝÖáΪÏúÊ۶ͨ¹ýÉÏÊö´úÂ룬¿ÉÒÔÇáËÉʵÏÖÖù״ͼµÄÌìÉú¡£
µÚ¶þÖÖ·½·¨£ºÊ¹ÓÃJavaScript¿â
³ýÁËʹÓÃLaravel ChartsÀ©Õ¹°ü£¬»¹¿ÉÒÔʹÓÃJavaScript¿âÀ´ÊµÏÖÖù״ͼ¡£ÏÖÔÚ×î³£¼ûµÄJavaScript¿â°üÀ¨Chart.js¡¢Highcharts¡¢EChartsµÈ¡£ÕâЩ¿â¿ÉÒÔͨ¹ýCDN»òÕßÍâµØÒýÈëÀ´Ê¹Óá£
ÒÔChart.jsΪÀý£¬¿ÉÒÔͨ¹ýÈçÏ´úÂëÀ´ÌìÉúÖù״ͼ£º
<canvas></canvas>
µÇ¼ºó¸´ÖÆ
var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], datasets: [ { label: 'Monthly Sales', data: [50, 70, 80, 90, 100, 120], backgroundColor: 'rgba(0, 119, 204, 0.5)', borderColor: 'rgba(0, 119, 204, 1)', borderWidth: 1 } ] } });
µÇ¼ºó¸´ÖÆ
ͨ¹ýÉÏÊö´úÂ룬¿ÉÒÔÔÚHTMLÒ³ÃæÖÐÌìÉúÒ»¸öIDΪ¡°myChart¡±µÄ»²¼£¬È»ºóͨ¹ýJavaScript´úÂëÌìÉúÖù״ͼ²¢äÖȾµ½»²¼ÉÏ¡£
×ܽ᣺
ÒÔÉÏÊÇÁ½ÖÖʹÓÃLaravelʵÏÖÖù״ͼµÄÒªÁì¡£¿ÉÒÔƾ֤×Ô¼ºµÄÐèÒªÀ´Ñ¡ÔñºÏÊʵÄÒªÁ죬Êý¾Ý¿ÉÊÓ»¯¿ÉÒÔʹµÃÊý¾ÝÔ½·¢Ö±¹Û£¬ÕÆÎÕÕâÒ»ÊÖÒÕ¹ØÓÚ¿ª·¢¸ßЧ¾«Á·µÄWebÓ¦ÓóÌÐòÖÁ¹ØÖ÷Òª¡£
ÒÔÉϾÍÊÇlaravelÏîÄ¿ÖÐÔõôÌí¼ÓÖù״ͼµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡