Question

所以我对高级图表相对较新，但我希望能够绘制图表，当我们将其设置为打印时，我已经制作了唯一可用的选项，将图形调整为更大，增加spacingBottom或者可能会改变绘图大小，基本上我需要在底部留出空间，然后在这个空间中添加一个标签。

我已经弄清楚如何进行调整大小，并添加带有事件beforePrint（）和afterPrint（）的标签，但是底部间距的变化仍然无法实现。我在这里搜索了一些问题，但似乎都是针对出口的，我也尝试过，相信它们是相关的，它们可能是？我尝试使用exports.chartOptions，但这似乎只影响导出，在我们选择打印时什么都不做。

感谢你给予任何指导或帮助。

$(function () {
 $('#container').highcharts({

    chart: {
        type: 'column',
        events: {
                        beforePrint: function() {
                            this.resetParms = [this.chartWidth, this.chartHeight, false];
                            this.setSize(600,400,false);
                          /*eventually if I ever get this to work this is how I'd add the text.*/
                          //this.myText = this.renderer.text('this is a test',10,350 ).add();
                        },
                        afterPrint: function() {
                            this.setSize.apply(this,this.resetParms);
                        /*if(this.myText) {
                                this.myText.destroy();
                            }*/
                            Highcharts.charts.forEach(function (chart) {
                if (chart !== undefined) {
                chart.reflow();
              }
            });
                        }
                    }        
    },

    title: {
        text: 'Hours'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Number of Hours'
        }
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    exporting:{ 
                    buttons: {
                        contextButton:{
                            menuItems: null,
                            onclick: function () {
                                this.print();
                                }
                        }
                    }
        },
  series: [{
        name: 'PY Admin',
        data: [5, 3, 4, 7, 2,3,4,5,6,7,8,12],
        color: '#85C1E9',
     stack:'lyear'
    }]
});
});

http://jsfiddle.net/cajmrn/jkv6jbh0/3/

Answer 1

您是否尝试使用beforePrint事件上的Chart.update（）函数更新bottomSpacing属性？如果是，并且它不起作用，请使用update而不重绘（第二个参数为false）并重绘没有动画的图表：

this.update({
  chart: {
    spacingBottom: 200
  }
}, false);
this.redraw(false);

您也可以设置新的图表高度减去要应用的间距，而不是设置间距。

API参考：
http://api.highcharts.com/highcharts/Chart.update
http://api.highcharts.com/highcharts/Chart.redraw
http://api.highcharts.com/highcharts/chart.spacingBottom

示例：
http://jsfiddle.net/20r1z3kg/ - 更新间距
http://jsfiddle.net/xp0m4nbh/ - 使用setSize（）

更改图表高度

打印时设置图表选项并添加页脚

1 个答案: