javascript - 如何在 HighCharts 中使用@Media Query

Question

我正在使用 High-chart Graphs，如何使工具提示或图例字体大小响应。如何使用 @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 />';
};

Answer 1

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

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

更新

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

也回到你使用媒体查询的问题。 Highcharts 生成 svg 并设置内联样式而不使用类名。它还会在调整窗口大小时刷新/重新绘制图表。因此，即使不是不可能，也很难使用 css 设置样式。