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/