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

highcharts透明系列

1 个答案: