Highchart Bibliothek und Responsive Design

Question

Ich benutze die Bibliothek highcharts und versucht, dieses Beispiel auf ihre Dokumentation:

https://www.highcharts.com/demo/responsive

Das Problem ist, dass ich mehr als eine reaktions Regel konfigurieren, müssen mehrere max-width der Griff . Aber das scheint nicht zu funktionieren. Das responsive.rules Element in der Tabelle Config ist ein Array, so dass ich davon ausgegangen, ich mehr als eine Regel wie so definieren:

var chartConfig = { 
chart: { 
    type: 'column' 
}, 
[...]// Default config here for Tablet/PC 
, 
    responsive: { 
     rules: [{ 
      condition: { 
       maxWidth: 273 
      }, 
      chartOptions: { 
       [...] 
       // Config for max-width 375 devices (bar chart width is 273 on my page) 
      } 
     }, 
     { 
      condition: { 
       maxWidth: 312 
      }, 
      chartOptions: { 
       [...] 
       // Config for max-width 420 devices (bar chart width is 312 on my page) 
      } 
     }] 
    } 

Aber es wird nicht funktionieren. Die Bibliothek verwendet nur die letzte Konfiguration. Kann jemand mehr als eine reaktionsfähige Konfiguration mit dieser Bibliothek umgehen?

Answer 1

Wie ich in meinem Kommentar erwähnt haben, sollten Sie in der Lage sein, Ihre Regeln zu ändern, da die Regeln von oben nach unten ausgeführt werden: http://api.highcharts.com/highcharts/responsive.rules

Eine Reihe von Regeln für reaktions Einstellungen. Die Regeln werden von von oben nach unten ausgeführt.

responsive: { 
    rules: [{ 
     condition: { 
     maxWidth: 500 
     }, 
     chartOptions: { 
     title: { 
      text: 'condition1' 
     } 
     } 
    }, { 
     condition: { 
     maxWidth: 300 
     }, 
     chartOptions: { 
     title: { 
      text: 'condition2' 
     } 
     } 
    }] 
    } 

Ein Beispiel des Diagramms mit geändertenen Regeln bestellen:

http://jsfiddle.net/016fpuv5/3/