jquery - 获取 Highcharts 宽度

Question

我想获得当前的图表宽度，我尝试过这样的事情：

chart.width

和

$(this).parent().width()

图表在哪里

chart = new Highcharts.Chart({ ... })

但是不起作用...

更多信息

我想在导出按钮（响应式）的左侧放置一个图像（一个助手）。

目前我有以下代码：

$(document).ready(function() {
     chart = new Highcharts.Chart({
        chart: {
            renderTo: 'area1',
            type: 'bar',
            events: {
                load: drawImages,

            }
         ...}
      })
    })

和

function drawImages() {
    var chart = this;
    x = chart.plotRight - 50

    chart.renderer.image('/assets/faq.png', x, 0, 20, 20)

    .attr({
        zIndex: 100,
        title: "My title for displaying a tooltip"
    })
    .css({
        cursor: 'pointer'
    })
    .add();   
    };

但图像出现在图表的左侧（使用plotRight）。

我知道如何获取图形的 div 容器的宽度（“area1”），但我喜欢编写更多面向对象的代码（因为我每页至少有 5 个图形）。

Answer 1

在图表对象中，您可以访问 chartWidth 参数，该参数保持图表的宽度。

http://jsfiddle.net/7xNQL/1/

//callback
    function(chart){

                console.log(chart.chartWidth);

            }

Answer 2

最后我找到了一个解决方案，使用方法“容器”：

$(chart.container).width()

这将返回图表的当前宽度。

Answer 3

您可以使用 xAxisextreme.max 并将其转换为像素。类似的东西（未测试）：

Chart.xaxis[0].toPixels( chart xaxis[0].getExtremes().max )

感觉应该有一个更简单的方法，但我想我会使用包含 div 的宽度。也许您可以使用图表选项来获取我想要的包含 div 并从中获取宽度。

Answer 4

这是一个老问题，所以我的回答只是为以后检查的人提供更多选择。

如果你想要图表的全宽：

this.chart.chartWidth

如果您想要图表 xAxis 宽度，左侧没有可能的标签（检查图像），您有两个选择：

this.chart.plotWidth // or
this.chart.xAxis[0].width