highstocks响应式样式不适用于其他设备

Question

我正在尝试在三种不同的设备中为图表提供响应式样式。我创建了规则iPad Pro（最大宽度2048），iPad（最大宽度1024）和移动设备（最大宽度480），但是无法正确呈现。为iPad pro提供渲染iPad样式，为iPad提供展示移动样式。

responsive: {
            rules: [

                { 
                    condition: {
                        maxWidth:2048
                        }, 
                        chartOptions: {
                            series: [{
                                dataLabels: {
                                    style: {
                                        fontSize: '25px',
                                        color: 'red'
                                    },

                                }

                            },
                            {
                                dataLabels: {
                                    style: {
                                        fontSize: '15px',
                                    },

                                }

                            }
                        ]


                        }
                },
                {
                    condition: {
                       maxWidth: 1024
                    },
                    chartOptions: {
                        series: [{
                            dataLabels: {
                                style: {
                                    fontSize: '35px',
                                    color: 'green'
                                },

                            }

                        },
                        {
                            dataLabels: {
                                style: {
                                    fontSize: '8px',
                                },

                            }

                        }
                    ] 

                }
                }, 


            {
                condition: {
                   maxWidth: 480
                },
                chartOptions: {
                    series: [{
                        dataLabels: {
                            style: {
                                fontSize: '20px',
                            },

                        }

                    },
                    {
                        dataLabels: {
                            style: {
                                fontSize: '8px',
                            },

                        }

                    }
                ] 

            }
            }]
    } `

Answer 1

您是否注意到诸如maxWidth和minWidth之类的响应规则已应用于图表宽度？这并不总是等于屏幕宽度。

maxWidth的Highcharts api描述：

  

如果图表宽度小于此宽度，则适用响应规则。

因此您的代码可能正常工作。在此示例中，在几个屏幕宽度上检查标题：https://jsfiddle.net/BlackLabel/3stawvum/。

  responsive: {
    rules: [{
      condition: {
        maxWidth: 2048,
        minWidth: 931
      },
      chartOptions: {
        title: {
          text: '2048 title'
        },
      }
    }, {
      condition: {
        maxWidth: 930,
        minWidth: 401
      },
      chartOptions: {
        title: {
          text: '1024 title'
        },
      }
    }, {
      condition: {
        maxWidth: 400
      },
      chartOptions: {
        title: {
          text: '480 title'
        },
      }
    }]
  }

API参考：

• https://api.highcharts.com/highcharts/responsive.rules.condition.maxWidth