Highchartライブラリーと応答性のデザイン

Question

私は図書館highchartsを使用し、そのドキュメント上でこの例を試してみました：

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

問題は、私はいくつかの最大幅のを処理するために、複数の応答ルールを設定しなければならないこと、です。しかし、これは動作していないようです。チャートの設定でresponsive.rules要素は配列なので、私はそうのような複数のルールを定義することができます仮定：

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) 
      } 
     }] 
    } 

をしかし、それは動作しません。ライブラリは最後の構成のみを使用します。誰でもこのライブラリで複数のレスポンシブな設定を処理する方法を知っていますか？

Answer 1

私は私のコメントで述べたようにルールは上から下に実行されているので、あなたは、あなたのルールの順序を変更することができるはずです。 http://api.highcharts.com/highcharts/responsive.rules

応答設定のための規則のセット。ルールは、上から下へ から実行されます。変更されたルールに

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

あなたのチャートの一例で注文：

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