如何在 HighCharts 中使用@Media Query答案

【问题标题】：How to use @Media Query in HighCharts如何在 HighCharts 中使用@Media Query
【发布时间】：2017-08-12 18:20:03
【问题描述】：

我正在使用高级图表，如何使工具提示或图例字体大小响应。如何将@media-query 用于工具提示。这是我的代码

var plotOptions = {
 pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      depth: 35,
      dataLabels: {
        enabled: true,
        format: '<b style="font-size:20px;">{point.name}:: {point.y:.1f}</b>',
        style: {
                   color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
             }
          }
       };

var  legend={
    enabled: true,
    layout: 'vertical',
    align: 'right',
    width: 200,
    verticalAlign: 'middle',
    useHTML: true,
    labelFormatter: function() {
    return '<table style="border:0"><tr><td style="font-size:24px;"> ' + this.name + ' - </td> <td style="font-size:24px;"> ' +             this.y + ' </td></tr></table> <br />';
};

【问题讨论】：

使用响应式选项 (api.highcharts.com/highcharts/responsive)。示例：jsfiddle.net/3et0ojye.

标签： javascript jquery css highcharts media-queries

【解决方案1】：

使用 Highcharts API responsiveoption。 http://api.highcharts.com/highcharts/responsive.rules 您可以在那里定义多个规则并覆盖任何其他已定义的图表选项。这就是你所要求的。例如定义label.styles 并通过规则覆盖它们。这里是一个规则定义的例子：

responsive: {
  rules: [{
    condition: {
      maxWidth: 500
    },
    chartOptions: {
      legend: {
        enabled: false
      }
    }
  }]
}

更新

您至少需要 Highcharts 5.0 才能使用响应式选项。

还使用媒体查询回到您的问题。 Highcharts 生成一个 svg 并设置内联样式而不使用类名。当窗口调整大小时，它也会刷新/重新绘制图表。所以用 css 设置样式非常困难，如果不是不可能的话。

【讨论】：