如何使highcharts面积图中的面积图线条从开始到结束都平滑

Question

我们使用面积图来绘制图表。但是面积曲面线并不像直线那样平滑。那么我们如何才能获得平滑的表面积图表。

const bitAreaChart = Highcharts.chart('bitkpicontainer', {
                        chart: {
                            height: '320',
                          
                        },
                        colors: colors,
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: { // don't display the dummy year
                                day: '%b-%y'
                            },
                           
                            minPadding: 0,
                            maxPadding: 0,
                            style: {
                                textOverflow: 'none',
                                color: '#000000'
                            }
                        },
                         yAxis: {
                          min: 0,
                          labels: {
                            useHTML: true,
                            style:{
                              fontSize: '10px',
                              'font-family': 'ProximaNova-Light',
                              color: '#71808C',
                              'line-height': '11px'
                            }
                          },
                          title: {
                            text: "Amount($)",
                          }
                        },
                        tooltip: {
                            formatter: function(this: any) {
                                return this.series.name + " : " + Highcharts.numberFormat((this.y), 2, '.', ',');
                            }
                        },
                        exporting: {
                            buttons: {
                                contextButton: {
                                    enabled: false
                                }
                            }
                        },
                        plotOptions: {
                            series: {
                                marker: {
                                    enabled: false,
                                    symbol: 'circle',
                                    radius: 2,
                                    states: {
                                        hover: {
                                            enabled: true
                                        }
                                    }
                                }
                            }
                        },
                        series: [{
                          type: 'area',
                            name: 'Behaviour Value',
                            data: bitData
                        }, {
                          type: 'area',
                            name: 'Influence Value',
                            data: relationshipData
                        }, {
                          type: 'area',
                            name: 'Transaction Value',
                            data: quantumData
                        }
                        // },{
                        //   type: 'line',
                        //   name: 'John',
                        //   data: quantumData
                        // }
                        ]

        }as any);

这里我们使用上面代码中的 highcharts 中的区域类型图表。

但是我们需要像下图一样平滑的绘图。

Answer 1

您只需将系列类型从

area

更改为

areaspline

。

演示：https://jsfiddle.net/BlackLabel/8ob1hm2j/

参考： https://www.highcharts.com/docs/chart-and-series-types/areaspline-chart