×ðÁú¿­Ê±¹ÙÍøµÇ¼

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ÏîÄ¿ÖÐÔõôÌí¼ÓÖù״ͼµÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí£¬°æȨÕùÒéÓë±¾Õ¾Î޹أ¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿­Ê±¹ÙÍøµÇ¼ÂËÓÍ»úÍø¹Ù·½Ì¬¶È£¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ£¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢£¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢£¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼ʵʱÐÞÕý»òɾ³ý¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼

18523999891

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎ壬9:30-18:30£¬½ÚãåÈÕÐÝÏ¢

QR code
ÍøÕ¾µØͼ