jquery - Highcharts reflow does not work on class selector -

Did anyone try to run High Chart reflow () function on class selector instead of ID selector?

See examples where I have 2 charts with 1 chart, which is to toggle the size of their divisvei. I have the second 2 buttons, to reflow the chart by an id, and The second class reflows the chart.

Note that no two charts using class selector refill, and it only reflows the first element using that square.

HTML:

  & lt; Script src = "http://code.highcharts.com/highcharts .js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://code.highcharts.com/modules/exporting.js" & gt; & Lt; / Script & gt; & Lt; Div style = "width: 600px" & gt; & Lt; Div id = "container1" class = "needreflow" style = "width: 400px; height: 300px; margin: 1em; range: 1px solid brown" & gt; & Lt; / Div & gt; & Lt; Div id = "container2" class = "needreflow" style = "width: 400px; height: 300px; margin: 1em; range: 1px solid brown" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Button id = "set-div-size" class = "autocompare" & gt; Toggle Container Size & lt; / Button & gt; & Lt; Button ID = "reflow-chart-byid" class = "autocompare" & gt; Again flow chart by IID selector & lt; / Button & gt; & Lt; Button id = "reflow-chart-byclass" class = "autocompare" & gt; Flow chart again by category selector & lt; / Button & gt;  

jes:

  $ (function () {$ ('# container1'). HighChurch ({xAxis: {categories: ['Jan' '' ('' '' '' '' '' '', 'Click (function () {{Data: [29.9, 71.5, 106.4]}]}} var var = false; $ (' # $ ('# Container 1') width (wide 400: 500); $ ('# container 2') width (wide? 400: 500); wide =! Wide;}); $ ('# Reflow-chart- $ (' # Container1 '). $ (' # Container1 '). HighChurch (). Reflow (); $ (' # container2 '). High Chart (.) Reflow ();}); $ ('# Reflow' (function () {$ ('. Needreflow'). HighChurch (). Reflow ();});});  

< Div class = "post-text" itemprop = "text">

This is a good overview, and my value It is not how this .hicharch () function has been implemented. As seen, it does not affect many elements with class selectors because it only works on single elements

If you are looking at the function (line 971-1005) you can see that this code:

  / ** * related framework * / $ .fn.highcharts = function () {...} is called without parameters or with returns when in the form of a plugin Chccharc Register logic, get a predefined chart (if option === UNDEFINED) {ret = charts [attr (it [0], "data-Uchccharc-chart")]; } ... returns return; }  

The return value will always be this [0] , which means that how many elements do you choose, it will come back first, and it can not handle too many The element

ref will also be executed once, because highchurch - function does not return a list, which is reflow -Function and if this happens then I think the reflow function does not support many elements.

A solution may be using a .each and iterate on each container that you meet with your selector, such as ():

  $ ('Needreflow'). Each (function () {$ (this). Highchurch (.) Reflow ());});