1

热图图表未显示在我的 PDF Laravel 中......我将启用 javascript 设置为 true，并在我的控制器中设置了一些其他选项，如下代码所示

 public function genReportPDF(Request $request)
{
    $pdf = \PDF::loadView('report.ReportPDF');
    $pdf->setOption('images', true);
    $pdf->setOption('enable-javascript', true);
    $pdf->setOption('enable-smart-shrinking', true);
    return $pdf->download('ReportPDF.pdf');
}

这是我的名为 ReportPDF.blade.php 的刀片文件。我为我的热图图表使用 amchart 包。

    <script type="text/javascript" >

     am4core.ready(function() {

    // Themes begin


    // Themes end

    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

    chart.width = am4core.percent(50);
    chart.height = am4core.percent(50);

    chart.maskBullets = true;

    var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());

    yAxis.title.text = "Likelyhood of occurrence";
    xAxis.title.text = "Magnitude of Impact";
    yAxis.title.fontWeight = "bold";
    xAxis.title.fontWeight = "bold";

    xAxis.dataFields.category = "x";
    yAxis.dataFields.category = "y";

    xAxis.renderer.grid.template.disabled = true;
    xAxis.renderer.minGridDistance = 40;

    yAxis.renderer.grid.template.disabled = true;
    yAxis.renderer.inversed = true;
    yAxis.renderer.minGridDistance = 30;

    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryX = "x";
    series.dataFields.categoryY = "y";
    series.dataFields.value = "value";
    series.sequencedInterpolation = true;
    //series.defaultState.transitionDuration = 3000;

    // Set up column appearance
    var column = series.columns.template;
    column.strokeWidth = 2;
    column.strokeOpacity = 1;
    column.stroke = am4core.color("#ffffff");
    column.tooltipText = "{x}, {y}: {value.workingValue.formatNumber('#.')}";
    column.width = am4core.percent(100);
    column.height = am4core.percent(100);
    column.column.cornerRadius(6, 6, 6, 6);
    column.propertyFields.fill = "color";


    var bullet2 = series.bullets.push(new am4charts.LabelBullet());
    bullet2.label.text = "{value}";
    bullet2.label.fill = am4core.color("#000000");
    bullet2.zIndex = 1;
    bullet2.fontSize = 13;
    bullet2.interactionsEnabled = false;


    var legend = new am4charts.Legend();
    legend.parent = chart.chartContainer;
    legend.data = [{
      "name": "Very High",
      "fill": am4core.color("#ca0101")
    }, {
      "name": "High",
      "fill": am4core.color("#F6BE11")
    }, {
      "name": "Medium",
      "fill": am4core.color("#F4FF00")
    }, {
      "name": "Low",
      "fill": am4core.color("#2B97BE")
    }, {
      "name": "Very Low",
      "fill": am4core.color("#0CAD23")
    }];

    chart.data = [{
      "y": "5 - Almost Certain",
      "x": "1 - Insignificant",
      "color": "#F4FF00",
      "value": 20

    }, {
      "y": "4 - Likely",
      "x": "1 - Insignificant",
      "color": "#F4FF00",
      "value": 15
    }, {
      "y": "3 - Moderate",
      "x": "1 - Insignificant",
      "color": "#2B97BE",
      "value": 25
    }, {
      "y": "2 - Unlikely",
      "x": "1 - Insignificant",
      "color": "#0CAD23",
      "value": 15
    }, {
      "y": "1 - Rare",
      "x": "1 - Insignificant",
      "color": "#0CAD23",
      "value": 12
    }
    ];

    // define colors
    var colors = {
      "critical": "#ca0101",
      "bad": "#e17a2d",
      "medium": "#e1d92d",
      "good": "#5dbe24",
      "verygood": "#0b7d03",

    };




    var baseWidth = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
    var maxRadius = baseWidth / Math.sqrt(chart.data.length) / 2 - 2; // 2 is jast a margin



    chart.plotContainer.events.on("maxsizechanged", function() {
      var side = Math.min(chart.plotContainer.maxWidth, chart.plotContainer.maxHeight);
    })



    });
    </script>  

  <div id="chartdiv"></div>

我使用 laravel 5.8 版本。以前我使用 domPDF 但似乎该包不支持 javascript 。对不起，如果我的解释不清楚。希望它有所帮助。

4

0 回答 0