Question

我正在尝试弄清楚如何用同一系列的蓝色填充颜色。

请看一下我的参考资料，这是我想要完成的事情。

http://imgur.com/sYW8guR

仅供参考：这是一张简单的区域图表，可以节省您的时间

http://jsfiddle.net/kylander/33cutjqn/

Answer 1

如果不使用多个系列或编写自己的复杂渲染脚本，我都没有办法做到这一点。

使用2系列的另一种选择与Sebastian提出的系列略有不同：

1）用户alternateGridColor

2）将系列的fillColor设置为具有适当的不透明度，以使替代网格颜色具有所需效果

3）使用可以自动创建的第二个系列，堆叠在主数据系列的顶部，填充白色以覆盖“打开”中的交替颜色。空间。

Example：

http://jsfiddle.net/jlbriggs/mg4vs1dm/

老实说，我个人只是选择按原样使用alternateGridColor选项。

Answer 2

简单的方法是使用两个系列。 http://jsfiddle.net/sbochan/gba46s7L/

 series: [{
        name: 'USA',
        data: [1,2,3,2]
    }, {
        name: 'USSR/Russia',
        data: [null,2,3]
    }]

Answer 3

在与svg玩了一点后，我发现了另一个解决方案。

您可以编写

，而不是定义颜色

color: "url(#SomePattern)"

在单独的svg中定义模式，如下所示

<div id="defs" style="width:0px;height:0px;">

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
         xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <pattern id="SomePattern"
             width="50" height="50"
             patternUnits="userSpaceOnUse">

             <rect width='50' height='50' fill='#BDDEE8'/>
             <rect x='25' width='25' height='50' fill='#D4E4E9'/>
        </pattern>
    </defs>
    </svg>
</div>

然后插入类似

的内容

$(".highcharts-container defs").append($("#pattern-container defs").html());

这是一个演示：http://jsfiddle.net/DrathVedro/33cutjqn/2/

然而，它只是一个纹理而且它不像你的演示中那样绑定点。

Answer 4

尝试

xAxis.alternateGridColor

文档： http://api.highcharts.com/highcharts#xAxis.alternateGridColor

Highcharts多种填充颜色

4 个答案: