Question

高架图的底部以pdf格式呈现图表

我试图在刀片模板中渲染一个highcharts图表，然后将生成的view / html传递给DocRaptor，以便将其转换为pdf。使用Laravel的View :: make然后使用render（）函数呈现视图。一切都按预期工作，除了渲染的条形与yAxis（水平）上的刻度线不匹配。

我已经包含了我所指的内容的图像。在图像2中的条形图（土星和雷克萨斯）应该超过1M刻度线，我希望Acura能够进一步朝向1M刻度线。图像仅包含图表中的最后3个条形图，但整个系列也是如此。

不太相关的是，我基本上将系列数据拆分成足够小的块，这样图表就可以放在页面上（因此jQuery $ .each（））。

生成图表的代码如下。 load和render函数中的代码都作为document.write调试语句执行。任何帮助/想法将不胜感激。

            $("div[id^='Chart_chunk_count_']").each(function() {
                var myChart = Highcharts.chart($(this).attr("id"), {
                    chart: {
                        borderWidth: 0,
                        events: {
                            load: function(event) {
                                document.write('In load event');
                            },
                            render: function(event) {
                                document.write('In render event');
                            }
                        },
                        height: j_audience_chart_chunks['metadata']['page'][$(this).data("chart-page")]['height'],
                        type: 'bar',
                        width: 650
                    },
                    credits: {
                        enabled: false
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        bar: {
                            borderRadius: 3,
                            borderWidth: 0,
                            color: j_audience_chart_chunks['metadata']['count_chart']['color'],
                            pointWidth: 30,
                            turboThreshold: 0
                        },
                        series: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                /* allowOverlap: true, */
                                /* backgroundColor: '#FA9005', */
                                color: '#606060',
                                crop: false,
                                defer: false,
                                enabled: true,
                                format: '{point.y:,.0f}',
                                inside: true,
                                /* overflow: 'none', */
                                style: {
                                    fontSize: "11px",
                                    fontWeight: "normal",
                                    textOutline: 'none'
                                }
                            }
                        }
                    },
                    title: {
                        text: (type == "index") ? "Index Against Profiled Audience" : "Audience Count"
                    },
                    tooltip: {
                        enabled: false
                    },
                    xAxis: {
                        categories: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['categories'],
                        minorTickInterval: null,
                        title: {
                            text: null
                        }
                    },
                    yAxis: {
                        min: (type == 'count') ? 0 : -100,
                        max: j_audience_chart_chunks['metadata']['count_chart']['max'],
                        title: {
                            text: null
                        },
                        labels: {
                            /* format: '{point.y:,.0f}', */
                            overflow: 'justify'
                            /*
                            style: {
                                color: '#fa9005'
                            }
                            */
                        }
                    },
                    series: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['series']
                });


            });

Answer 1

正在发生的事情是JavaScript完成并且DocRaptor / Prince开始构建PDF，但是默认的Highcharts动画尚未完成运行。禁用动画图表宽幅可以解决此问题。

您需要将chart.animation设置为false，例如：

chart: {
  animation: false
}

highcharts渲染与docraptor渲染pdf中的网格不匹配

1 个答案: