如何用HighCharts製作數學圖表？

Question

您好，我在做一個Web項目，該項目旨在取代後端圖表渲染器前端圖表渲染器。我使用的前端圖表庫是HighCharts。第一張圖顯示了圖表應該顯示的內容，第二張圖顯示了HighCharts基於相同數據顯示的圖表。正如你所看到的，在點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] 
    }] 
    }); 
});