2013-02-24 100 views
0

我正在畫兩個系列的折線圖,其中之一是透明的(但有彩色點)。highcharts透明系列

我的問題是透明系列在圖例中沒有顏色,並且看起來不太好(尤其是通過在圖例中單擊它的名稱來隱藏它時)。

下面是我在做什麼的例子: JSFiddle Example

創建透明系列的代碼是:

{type:'spline',name:'Transparent',color:'rgba(255, 255, 255, 0.1)', data:[{x:1361059200000, y:0.0, marker: {symbol: "square", radius: 3, fillColor: "#f2a8a8", states: { hover: {radius: 3, fillColor: "#f2a8a8"}}}},{x:1361088000000, y:0.0, marker: {symbol: "square", radius: 8, fillColor: "#f2a8a8", states: { hover: {radius: 8, fillColor: "#f2a8a8"}}}},{x:1361116800000, y:0.0, marker: {symbol: "square", radius: 6, fillColor: "#f2a8a8", states: { hover: {radius: 6, fillColor: "#f2a8a8"}}}}]} 

有沒有一種方法來設置顏色的系列傳奇(無論是在圖表創建過程中或在圖表創建後使用JavaScript)?

感謝, 謝夫

回答

0

而不是使用透明樣的,我建議使用自定義標記系列使用分散。

http://jsfiddle.net/G4NLn/3/

{ 
      type: 'scatter', 
      name: 'Transparent', 
      marker: { 
        symbol: "square", 
        radius: 3, 
        fillColor: "#f2a8a8", 
        states: { 
         hover: { 
          radius: 3, 
          fillColor: "#f2a8a8" 
         } 
        } 
      }, 
      //color: 'rgba(255, 255, 255, 0.1)', 
      data: [{ 
       x: 1361059200000, 
       y: 0.0, 
       marker: { 
        symbol: "square", 
        radius: 3, 
        fillColor: "#f2a8a8", 
        states: { 
         hover: { 
          radius: 3, 
          fillColor: "#f2a8a8" 
         } 
        } 
       } 
      }, { 
       x: 1361088000000, 
       y: 0.0, 
       marker: { 
        symbol: "square", 
        radius: 8, 
        fillColor: "#f2a8a8", 
        states: { 
         hover: { 
          radius: 8, 
          fillColor: "#f2a8a8" 
         } 
        } 
       } 
      }, { 
       x: 1361116800000, 
       y: 0.0, 
       marker: { 
        symbol: "square", 
        radius: 6, 
        fillColor: "#f2a8a8", 
        states: { 
         hover: { 
          radius: 6, 
          fillColor: "#f2a8a8" 
         } 
        } 
       } 
      }] 
+0

我想你的建議,它看起來更好。最後一個問題是,當隱藏散佈數據集時,圖例顯示帶有灰色水平線的符號,而我找不到消除這條線的方法。 – 2013-02-25 19:24:54

+0

這一行不是分散元素,而是yAxis gridLines。看看gridLines選項http://api.highcharts.com/highcharts#yAxis – 2013-02-26 08:51:05

+0

我很熟悉它。我不知道的是,它如何在你的小提琴中起作用。我沒有看到關於圖例線顏色的任何設置。 – 2013-02-26 12:40:11