导出时增加图表高度

Increase Height Of Chart On Export

本文关键字:高度 增加      更新时间:2023-09-26

使用最新的highcharts(3.0.7)。我们正在尝试在导出时将文本添加到图表顶部。要做到这一点,我需要增加spacingTop,这样我们就不会覆盖任何图表元素。然后,对于相同的图表高度,这导致图表变得不那么高spacingTop的量。如何获取当前图表高度并在导出时将X添加到其中?我试过:

exporting: {
    sourceWidth: 400,
    //sourceHeight: this.chartHeight,
    //sourceHeight: this.chartHeight + 200,
    scale: 1, //(default)
    chartOptions: {
        subtitle: null,
        height: this.chartHeight + 200
    }
}

这似乎被忽视了。看看这把小提琴。这只是一个测试,看看我是否能做到这一点。看起来应该是直接的。如果我取消对sourceHeight的注释,它仍然没有达到我的预期——图表仍然是400px高。因此,this.chartHeight似乎不包含任何内容。

最终,这个高度变化代码将存在于我们称之为的函数中

chartMainLoc.exportChart({
    type: 'image/jpeg',
    sourceHeight: this.chartHeight + 200,
    sourceWidth: this.chartWidth,
    scale: 1
}, {
    chart: {
        events: {
            load: function () {
                this.renderer.text('Occupational Employment and Wage Rates (OES) for Multiple Occupations in Louisiana in 2012<br /> The graph below shows the annual occupational employment and annual wage data for Multiple Occupations in Louisiana in 2012.<br /> ', 5, 15).attr({
                    rotation: 0
                }).css({
                    color: '#4572A7',
                    fontSize: '10px',
                    fontStyle: 'italic',
                    width: this.chartWidth
                }).add();
                this.renderer.rect(5, 5, this.chartWidth - 10, 60, 5).attr({
                    'stroke-width': 2,
                    stroke: 'black',
                    zIndex: 2
                }).add();
            }
        },
        spacingTop: 200,
        shadow: false
    }
})

由于我事先不知道图表的高度或宽度,我必须以某种方式获得这个值。

您需要使用对象(chart / series等)设置图表选项,如示例所示http://jsfiddle.net/GQUDJ/2/