如何在HighCharts中使用@Media查詢

Question

我正在使用高圖圖，如何使工具提示或圖例字體大小響應。 如何使用@ 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/response.rules您可以在其中定義多個規則並覆蓋任何其他定義的圖表選項。 這就是您要的。 定義例如label.styles並通過規則覆蓋它們。 以下是規則定義的示例：

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

更新資料

您至少需要Highcharts 5.0才能使用響應選項。

還可以使用媒體查詢回到您的問題。 Highcharts生成svg並設置內聯樣式，而無需使用類名。 當窗口調整大小時，它也會刷新/重繪圖表。 因此，使用css設置樣式非常困難，即使不是不可能。