有没有办法在HighCharts JS中获得更平滑的曲线？

q5iwbnjs 于 9个月前发布在 Highcharts

关注(0)|答案(2)|浏览(122)

我正在使用HighCharts来显示一个图表。目前的线条非常僵硬，上下移动时会产生尖锐的点。有没有办法改变配置选项来创建一个更平滑的曲线，类似于下图？

我试过将类型设置为样条线，但似乎没有任何效果
打印选项：{系列：{类型：'spline' } }

highcharts

来源：https://stackoverflow.com/questions/77238058/is-there-a-way-to-have-smoother-curves-in-highcharts-js

2条答案

按热度按时间

zdwk9cvp1#

the Highcharts forum上的一些人找到了一个解决方法，例如通过添加这条（稍微调整过的）线来获得平滑的线：

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

参见this JSFiddle demonstration。getPointSpline具有以下文档：
得到从给定点的前一个相邻点到给定点的样条线段。
getGraphPath函数使用它来绘制路径。

赞(0）回复(0）举报 9个月前

xnifntxz2#

您发送的图片中的图表也是Highcharts。😅
所以，是的，它可以用一种与你尝试的方式略有不同的方式来完成。这可以通过在2个地方设置系列类型来完成，不幸的是，这在plotOptions中无法完成，此属性用于为这些单独的系列类型设置选项。
第一种方法是使用chart.type来设置默认的序列类型：

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  series: [{
    data: [2, 5, 2, 3, 6, 5]
  }]
});

第二种方法是直接在给定的序列中设置类型（series.type）：

Highcharts.chart('container', {
  series: [{
    type: 'spline',
    data: [2, 5, 2, 3, 6, 5]
  }, {
    type: 'line',
    data: [3, 4, 6, 2, 5, 1]
  }]
});