2014-09-27 107 views
0

我正在使用HighCharts版本4.0.4。我有一個散點圖,它有寬度和高度的百分比值。因此,如果容器/窗口的大小發生變化,圖形會自動調整大小。HighCharts:動態調整散點圖的標記

尺寸不變的唯一東西是標記的半徑,因爲它似乎只能定義一個數字,請參見plotOptions.scatter.marker.radius

這裏是一個JSFiddle here與10

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'scatter', 
      zoomType: 'xy' 
     }, 
     plotOptions: { 
      scatter: { 
       marker: { 
        radius: 10 
       } 
      } 
     } 
     /*, ... */ 
    }); 
}); 

修復radius調整大小的容器/窗,所述標記尺寸總是相同的。但是我的網頁使用百分比或rem值,我也想調整圖的所有標記。如何才能做到這一點?

回答

1

由於radius只需要一個數字,您可以將處理程序掛接到window.resize(例如),並根據寬度是增加還是減小來增大或減小標記半徑(可以更改標記半徑以編程方式將具有新半徑的對象傳遞給每個系列上的update方法)。

我不知道這是不是你想要的路徑,但我已經用一個簡單的例子更新了你的Fiddle。 其中,如果處理程序檢測到寬度增加,並且如果它檢測到減少,則將其減1(如果檢測到減少,則必須增加標記半徑1)

+0

是否有另一個更好解決方案?如果圖形被重繪,重繪事件被觸發,對嗎?所以也許這是改變標記大小的正確位置? – Tim 2014-09-29 07:08:34

+0

我不知道,我首先嚐試在[Redraw ](http://api.highcharts.com/highcharts#chart.events.redraw)事件處理程序,但出於某種原因調用系列[update](http://api.highcharts.com/highcharts#Series。更新)總是失敗,它裏面有一個'Uncaught TypeError:對象不是函數',我沒有時間調查爲什麼。 – ssarabando 2014-09-29 09:01:38

+1

調用'series.update()'時,它將觸發'redraw'事件。你把 ''redraw()'事件中的'series.update()',您將創建無限循環。這就是爲什麼不更新重繪事件中的圖表的原因。 – 2014-09-29 13:07:40