Laravel Project的Fudion图表

tf7tbtn2  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(102)

请帮助我实现Fusioncharts API与Laravel项目,当我使用CDN我有结果,但我的项目将是本地的,所以我需要脚本JS。当我下载它时,我看不到我的图表。

<head>
       <!-- Step 1 - Include the fusioncharts core library -->
    <script type="text/javascript" src="../js/fusioncharts.js"></script>
    <!-- Step 2 - Include the fusion theme -->
    <script type="text/javascript" src="../js/fusioncharts.theme.fusion.js"></script>
    <script type="text/javascript" src="../js/FusionCharts.HC.Charts.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/FusionCharts.HC.js"></script>
    <script type="text/javascript" src="../js/FusionCharts.HC.Widgets.js"></script>
    <script type="text/javascript" src="../js/FusionCharts.HC.world.js"></script>
    <script type="text/javascript" src="../js/FusionCharts.HC.Maps.js"></script>
    <script type="text/javascript" src="../js/control.js"></script>
    <script type="text/javascript" src="../js/FusionCharts.HC.PowerCharts.js"></script>


</head>
{{-- <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script> --}}`

yi0zb3m4

yi0zb3m41#

使用Laravel 5框架和FusionCharts创建图表
步骤1:安装所有依赖项并将其包含在项目中。
步骤2:创建FusionCharts控制器。
步骤3.设置FusionCharts控制器的视图。
步骤4.使用命令“php artisan serve”运行服务器,然后路由到视图。
步骤5.现在图表将呈现
参考文档- https://www.fusioncharts.com/blog/charts-laravel-web-application/#:~:text= To%20render%20FusionCharts%20using%20Laravel,most%20straightforward%20installation%20using%20Composer

<?php
        $barChart = new FusionCharts("bar2d", "myFirstChart" , 600, 400, "chart-container", "json",
            ' {
                "chart": {
                    "caption": "What kind of apps are you building?",
                    "numberSuffix": "%",
                    "paletteColors": "#876EA1",
                    "useplotgradientcolor": "0",
                    "plotBorderAlpha": "0",
                    "bgColor": "#FFFFFFF",
                    "canvasBgColor": "#FFFFFF",
                    "showValues":"1",
                    "showCanvasBorder": "0",
                    "showBorder": "0",
                    "divLineColor": "#DCDCDC",
                    "alternateHGridColor": "#DCDCDC",
                    "labelDisplay": "auto",
                    "baseFont": "Assistant",
                    "baseFontColor": "#153957",
                    "outCnvBaseFont": "Assistant",
                    "outCnvBaseFontColor": "#8A8A8A",
                    "baseFontSize": "13",
                    "outCnvBaseFontSize": "13",
                    "yAxisMinValue":"40",
                    "labelFontColor": "#8A8A8A",
                    " captionFontColor": "#153957",
                    "captionFontBold": "1",
                    "captionFontSize": "20",
                    "subCaptionFontColor": "#153957",
                    "subCaptionfontSize": "17",
                    "subCaptionFontBold": "0",
                    "captionPadding": "20",
                    "valueFontBold": "0",
                    "showAxisLines": "1",
                    "yAxisLineColor": "#DCDCDC",
                    "xAxisLineColor": "#DCDCDC",
                    "xAxisLineAlpha": "15",
                    "yAxisLineAlpha": "15",
                    "toolTipPadding": "7",
                    "toolTipBorderColor": "#DCDCDC",
                    "toolTipBorderThickness": "0",
                    "toolTipBorderRadius": "2",
                    "showShadow": "0",
                    "toolTipBgColor": "#153957",
                    "theme": "fint"
                  },

                "data": [{
                    "label": "Consumer general",
                    "value": "60.7"
                  }, {
                    "label": "Enterprise internal app",
                    "value": "41.7"
                  }, {
                    "label": "Progressive Web Apps",
                    "value": "25.1"
                  }, {
                    "label": "Consumer social network",
                    "value": "24"
                  }, {
                    "label": "Desktop web apps",
                    "value": "18.5"
                  }, {
                    "label": "Desktop apps (electron, etc)",
                    "value": "12.3"
                  }, {
                    "label": "Consumer chat",
                    "value": "12.2"
                  }, {
                    "label": "Other",
                    "value": "4.5"
                }]
            }');
        $barChart->render();
    ?>

相关问题