如何使用HighCharts制作数学图表？

Question

https://connect.microsoft.com/VisualStudio/feedback/details/2016177/text-visualizer-misses-corrupts-text-in-long-strings

大家好，我正在做一个旨在用前端图表渲染器替换后端图表渲染器的Web项目。我使用的前端图表库是HighCharts。第一张图显示了图表的外观，第二张图是HighCharts基于相同数据呈现的图表。正如您所看到的，在第3点和第3点4（从右到左计数），由于它们的值相等，它们之间的线被认为是水平的，这在图像1中是不同的。

无论如何我们可以使用HighCharts来实现第一张图像 - 如图表吗？欢呼声。

Answer 1

通常，当两个点具有相同的值时，线将呈现为直线。您可以通过包装getPointSpline来更改它。这是简单的POC：

(function(H) {
  H.wrap(H.seriesTypes.spline.prototype, 'getPointSpline', function(p, points, point, i) {

    var path = p.call(this, points, point, i),
        offset = -10;

    if (points[i - 1] && points[i - 1].y === point.y) {
      path[2] += offset;
      path[4] += offset;
    }

    return path;
  });
})(Highcharts)

工作演示：http://jsfiddle.net/99w72efv/8/

Answer 2

Highcharts拼接类型系列不提供您正在寻找的那种线条近似值。您可以添加更多数据点（可能是隐藏的）以获得您正在寻找的形状。

示例：http://jsfiddle.net/99w72efv/9/

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'spline'
    },
    yAxis: {max: 3},
    series: [{
      data: [2, 1, 0, 1, 3, 1, 2, 3, 0, 1, 2, 3, {x: 11.5, y: 3.2, marker: {enabled:false}}, 3, 1, 2, {x: 14.5, y: 2.2, marker: {enabled:false}}, 2, 0, 1]
    }]
  });
});