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

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

$(chart.container).width()

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

Answer 3

您可以使用xAxis extreme.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

获取Highcharts宽度

4 个答案: