Question

我使用库highcharts并在他们的文档中尝试了这个示例：

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

问题是，我必须配置多个响应规则来处理几个max-width。但这似乎不起作用。图表配置中的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/

高图库和响应式设计

1 个答案: