highcharts transparent series

Question

Я рисую линейную диаграмму с двумя сериями, одна из которых прозрачна (но с цветными точками).

Моя проблема заключается в том, что прозрачная серия не имеет цвета в легенде, и она выглядит не очень хорошо (особенно при ее скрытии, щелкнув ее имя в легенде).

Вот пример того, что я делаю: 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 после создания диаграммы)?

Спасибо, Зив

Answer 1

Вместо того, чтобы использовать прозрачный сплайн я предлагаю использовать разброс серии с настраиваемыми маркерами.

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" 
         } 
        } 
       } 
      }]