Highcharts区域填补顶部

Posted 2021-05-05

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

我想创建一个带有区域系列的图表，该图表将fillColor填充到图表的顶部。如果你颠倒了依赖的yAx，但是没有反转这些值，那就好了。我不想使用arearange系列类型，因为在原始数据表和导出中我没有显示“低”和“高”值。我只想使用y值。

有没有办法以简单的方式做到这一点。也许在高等领域有一个选项我忽略了。

答案

您可以添加具有整个绘图区域尺寸的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