如何用 HighCharts 制作数学图表？答案

【问题标题】：How to make mathematical chart with HighCharts?如何用 HighCharts 制作数学图表？
【发布时间】：2016-02-12 01:13:18
【问题描述】：

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

无论如何我们可以使用 HighCharts 来实现第一个图像 - 类似图表？干杯。

【问题讨论】：

你能发布一个活生生的例子吗，比如 jsFiddle？

标签： javascript charts highcharts

【解决方案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/

【讨论】：

【解决方案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]
    }]
  });
});

【讨论】：