Highcharts：平滑/抗锯齿线答案

【问题标题】：Highcharts : smooth / anti-aliasing lineHighcharts：平滑/抗锯齿线
【发布时间】：2013-06-03 10:28:28
【问题描述】：

我使用来自 highcharts 库的基本折线图，我认为线条不够平滑。

可以改进吗？

我的代码：

    chart: {
            type:'line',
            renderTo: 'issues_by_release',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
            },
    yAxis: { 
            min:0,
            labels:{ enabled:true },
            title: {
                     text:'Issues'
                   }                          
           },
    xAxis: {
            tickmarkPlacement: 'on',    
            tickLength:10,  
            categories:['1','2','3','4','5'],
            labels:{ rotation:-45, 
                     align:'right'
                   }                           
            },
    plotOptions: {
                    line: {                            
                            dataLabels: {
                                            enabled: true                                                    
                                        },
                            enableMouseTracking : false,
                            showInLegend: true
                        }                        
                    },                                
                    series: [{
                            type: 'line',                           
                            name: 'Testers', 
                            data: [1,2,3,4,5]                                                           
                            }                           
                            ]
            });
        });

提前谢谢你！

【问题讨论】：

Highcharts 提供样条拟合：highcharts.com/demo/spline-symbols/grid

标签： highcharts antialiasing

【解决方案1】：

这取决于您真正想要的是改进抗锯齿，还是您真正想要的是通过数据点插值的更平滑的曲线。

如果您想要更好的抗锯齿，则必须查看 SVG 选项 - 尽管老实说，我认为在这种情况下没有太大的改进空间。

如果你想要一条平滑的曲线，那么你想要的是样条图类型：

http://highcharts.com/demo/spline-plot-bands

请记住，样条曲线通过使用特定公式来平滑点之间的曲线来扭曲数据，这会增加高点和低点之间差异的严重性 - 它不应该仅仅用于美观。

【讨论】：

【解决方案2】：

我已经解决了添加行

Highcharts.seriesTypes.line.prototype.getPointSpline = Highcharts.seriesTypes.spline.prototype.getPointSpline;

在创建图表之前（改编自this 线程）。

Demo 在 JSFiddle 上。截图如下。

【讨论】：