Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/405.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Highcharts:根据容器中的元素调整图表容器的大小_Javascript_Text_Highcharts_Height_Spacing - Fatal编程技术网

Javascript Highcharts:根据容器中的元素调整图表容器的大小

Javascript Highcharts:根据容器中的元素调整图表容器的大小,javascript,text,highcharts,height,spacing,Javascript,Text,Highcharts,Height,Spacing,在生成Highcharts时,我希望在Highcharts容器中包含一个文本字符串,以便文本包含在可下载的图像中。问题是,文本的数量可能会改变(而不是由我改变),这意味着我为文本保留的空间将来可能会太小或太大。我的愿望是不必手动检查图表的属性是否必须在每次文本更改时更新 我的Highcharts代码可能如下所示(注意:本例不需要实际数据): var chart=新的Highcharts.chart({ 图表:{ 类型:“样条线”, 宽度:600, 间距底部:100, renderTo:“图表容

在生成Highcharts时,我希望在Highcharts容器中包含一个文本字符串,以便文本包含在可下载的图像中。问题是,文本的数量可能会改变(而不是由我改变),这意味着我为文本保留的空间将来可能会太小或太大。我的愿望是不必手动检查图表的属性是否必须在每次文本更改时更新

我的Highcharts代码可能如下所示(注意:本例不需要实际数据):


var chart=新的Highcharts.chart({
图表:{
类型:“样条线”,
宽度:600,
间距底部:100,
renderTo:“图表容器”
},
标题:{
文字:“2000-2010年某物的总数”,
对齐:“左”
},
副标题:{
正文:“资料来源:某些资料来源有限公司,
知识产权有限公司,专业发展精英,在劳动和就业方面的临时合同。但在最低限度的情况下,我们不需要在公共消费前进行劳动和就业实习。两人或两人因共同利益而被解雇“不属于教区。除非圣徒有时不自卑,否则不应因疏忽而受到惩罚。”, 对齐:“左”, 垂直排列:“底部” }, 图例:{ 已启用:false } }) .海图集装箱{ 边框:2个实心#CCC; 填充:10px; } 文本{字体系列:Helvetica;}
在本例中,我将subtitle元素设置为我的附加文本的主元素,并将chart.spacingBottom设置为100,这使副标题中的文本量具有合适的间距。但是,如果文本量增加,以至于subtitle元素的高度大于spacingBottom,则后面的文本将消失在图表容器的边框后面。除了图表本身之外,容器似乎不关心任何元素,如果未定义,chart.spacingBottom默认为15

我想做的是根据subtitle元素的呈现高度,以某种方式动态设置chart.spacingBottom(和/或chart.height),但出于某种原因,纯JS或jQuery似乎都无法获得highcharts容器中任何元素的高度

console.log(document.getElementsByClassName(“highcharts subtitle”).offsetHeight)返回未定义的

$(“.highcharts副标题”).height()返回整数0

我还尝试使用chart.renderer.text和chart.renderer.label来包含文本,而不仅仅是劫持subtitle元素。从这些元素中的任何一个获取高度都会产生相同的结果,而我最终想要使用subtitle,仅仅是因为获得正确的位置不那么麻烦。不过,我愿意接受建议

我忽略了哪些可以让我动态更改图表属性的提示或方法

如评论中所建议的,使用getBBox()是这个问题的答案


您应该能够使用getBBox()方法来准备图表:–

事件中的另一个示例:

var chart = new Highcharts.chart({
    chart: {
        type: 'spline',
        width: 600,
        renderTo: 'chart-container',
        events: {
            load: function() {
                this.update({
                    chart: {
                        spacingBottom: this.subtitle.element.getBBox().height
                    }
                });
            }
        }
    },
    title: {
        text: 'Total number of something from 2000-2010',
        align: 'left'
    },
    subtitle: {
        text: 'Source: Some Source Inc.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        align: 'left',
        verticalAlign: 'bottom'
    }
});
var图表=新的Highcharts.chart({
图表:{
类型:“样条线”,
宽度:600,
renderTo:'图表容器',
活动:{
加载:函数(){
这是更新({
图表:{
spacingBottom:this.subtitle.element.getBBox().height
}
});
}
}
},
标题:{
文字:“2000-2010年某物的总数”,
对齐:“左”
},
副标题:{
正文:“资料来源:某些资料来源有限公司,
知识产权有限公司,专业发展精英,在劳动和就业方面的临时合同。但在最低限度的情况下,我们不需要在公共消费前进行劳动和就业实习。两人或两人因共同利益而被解雇“不属于教区。除非圣徒有时不自卑,否则不应因疏忽而受到惩罚。”, 对齐:“左”, 垂直排列:“底部” } });
可以通过图表元素获得的其他一些有用元素:

x轴标签的高度:
chart.xAxis[0].labelGroup.element.getBBox().Height


图例高度:
chart.legend.legendHeight

您应该能够使用getBBox()方法来准备图表:非常有用。:)如果我选择通过渲染器而不是subtitle元素添加文本,我可以类似地使用getBBox()访问渲染器创建的元素的属性吗?
var chart = new Highcharts.chart({
    chart: {
        type: 'spline',
        width: 600,
        renderTo: 'chart-container',
        events: {
            load: function() {
                this.update({
                    chart: {
                        spacingBottom: this.subtitle.element.getBBox().height
                    }
                });
            }
        }
    },
    title: {
        text: 'Total number of something from 2000-2010',
        align: 'left'
    },
    subtitle: {
        text: 'Source: Some Source Inc.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        align: 'left',
        verticalAlign: 'bottom'
    }
});