Question

我搜索了highcharts文档和几个搜索引擎，以找到针对我的问题的解决方案，但找不到任何合适的解决方案。

我想创建一个具有区域序列的图表，该图表将其fillColor填充到图表顶部。如果您反转相关的yAxes，但不反转其值，它将像傻瓜一样。我不想使用arearange系列类型，因为在原始数据表和导出中，我不希望显示“低”和“高”值。我只想使用y值。

有没有一种简单的方法可以做到这一点。也许我忽略了highcharts中的一个选项。

Answer 1

您可以添加rect，它将具有整个绘图区域的尺寸，并在其上添加动画。为了绘制元素，只需在Chart.renderer.rect()处理程序上调用chart.events.load。整个过程如下所示：

在load事件上创建新元素，将其颜色和不透明度属性设置为默认值，然后添加动画：

chart: {
    type: 'area',
    events: {
        load() {
            var rect = this.renderer.rect(this.plotLeft, this.plotTop, 0, this.plotHeight)
              .attr({
                  fill: Highcharts.getOptions().colors[0],
                  opacity: 0.8
              })
              .add()
            rect.animate({
                width: this.plotWidth
            }, {
                duration: 1000
            })
        }
    }
},

然后将系列fillColor设置为等于白色（或绘图区域的其他颜色）：

series: [{
        name: 'USA',
        fillColor: 'rgba(255,255,255,1)',
        data: [
            ... some data ...
        ]
}]

实时示例： https://jsfiddle.net/up8f5x34/

API参考：

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect

https://api.highcharts.com/highcharts/series.area.fillColor

高图区域填充顶部

1 个答案: