如何在散点图上添加贯穿原点的线（从正到负） - 高图

Posted 2021-05-05

我正在尝试创建一条贯穿原点的参考线，并从负面传递到正面。查看我想要实现的示例 - 请参阅阈值线。此阈值线必须贯穿所有三个x，y坐标（-1，-45,000），（0.0），（1,45,000）。 enter image description here

以下是我到目前为止的工作。

http://jsfiddle.net/catio6/rhf6yre5/1/

我已经看了这个作为参考，但是经过几个小时的尝试用所有三个x，y坐标（-1，-45,000），（0.0），（1,45,000）复制它之后没有运气：http://jsfiddle.net/phpdeveloperrahul/XvjfL/

$(function () {
    $('#container').highcharts({

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar']
        },

        series: [{
            data: [29.9, 71.5, 256]
        }]

    }, function(chart) { // on complete
         console.log("chart = ");
        console.log(chart);
        //chart.renderer.path(['M', 0, 0, 'L', 100, 100, 200, 50, 300, 100])
        chart.renderer.path(['M', 75, 223.5,'L', 259, 47])//M 75 223.5 L 593 223.5
            .attr({
                'stroke-width': 2,
                stroke: 'red'
            })
            .add();

    });
});

答案

因此，据我所知，Highcharts没有一种定义从/到无穷大的线的方法。我必须为您解决此问题的一个想法是根据您的数据动态计算线系列的值。这个想法很简单：给定你要绘制的X和Y的最大值，我们只需要将轴限制为一个有意义的值，并计算渐近线系列的值，以使其看起来无限。我的算法看起来像这样：

// Get all your other data in a well formated way
let yourData = [
 {x: 0.57, y: 72484},
 {x: 0.57, y: 10000}
];

// Find which are the maximum x and y values
let maxX = yourData.reduce((max, v) => max > v.x ? max : v.x, -999999999);
let maxY = yourData.reduce((max, v) => max > v.y ? max : v.y, -999999999);

// Now you will limit you X and Y axis to a value that makes sense due the maximum values
// Here I will limit it to 10K above or lower on Y and 2 above or lower on X
let maxXAxis = maxX + 2;
let minXAxis = - (maxX + 2);
let maxYAxis = maxY + 10000;
let minYAxis = -(maxY + 10000);

// Now you need to calculate the values for the Willingness to pay series
let fn = (x) => 45000 * x; // This is the function that defines the Willingness to pay line

// Calculate the series values
let willingnessSeries = [];
for(let i = Math.floor(minXAxis); i <= Math.ceil(maxXAxis); i++) {
    willingnessSeries.push([i, fn(i)]);
}

这是一个工作小提琴：http://jsfiddle.net/n5xg1970/

我测试了几个数据值，所有这些值似乎都正常。希望它有助于问候