0

我正在绘制一个包含两个系列的折线图，其中一个是透明的（但带有彩色点）。

我的问题是透明系列在图例中没有颜色，而且看起来不太好（尤其是通过单击图例中的名称来隐藏它时）。

这是我正在做的一个例子： 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）？

谢谢，齐夫

4

1 回答 1

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"
                        }
                    }
                }
            }]
于 2013-02-25T14:59:15.453 回答